ExtJS 3.2.1 Registering Component for use with xtype

Question

In one file, I am creating a tab panel with two tabs. I am trying to register the component for use in a separate file. Consider the following:

Ext.ns('DVI');

var backtestTab = {
    xtype: 'groupingstore'
}

var intradayTab = {
    xtype: 'groupingstore'
}

DVI.DviDashboard = new Ext.TabPanel({
    activeTab: 0,
    items: [backtestTab, intradayTab]
});

Ext.reg('dviDashboard', DVI.DviDashboard);

Assume that this page properly populates the tabs with the grouping stores. In the page that calls this script, the code is as follows:

var dashboard = {
    xtype: 'tabpanel',
    id: 'port_dash-panel',
    activeTab: 0,
    items:[{
        title: 'Dashboard',
        xtype: 'dviDashboard'
    }]
 };

Which returns the following error:

b[d.xtype || e] is not a constructor

Upon researching, the above error indicates the component cannot be found or is not defined.

Note however, the below code does work and render the tabpanel:

var dashboard = {
    xtype: 'tabpanel',
    id: 'port_dash-panel',
    activeTab: 0,
    items:[DVI.DviDashboard]
 };

I'm only showing snipits. The dashboard tabpanel is rendered in a viewport.

I guess the first question is can I even register a component this way? And of course the second question is, why doesn't this work? :)

Answer 1

You are trying to register an instantiated object which won't work. Ext.reg normally takes components that were created by the Ext.extend method.

DVI.DviDashboard = Ext.extend(Ext.TabPanel,{
    initComponent: function(){

    Ext.apply(this, {
        activeTab: 0,
        items: [backtestTab, intradayTab]
    });

    DVI.DviDashboard.superclass.initComponent.call(this)   
}
});

Ext.reg('dviDashboard', DVI.DviDashboard);

Here is an old but helpful link about writing classes in Ext 3.* : http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/