Question

I extended a tabpanel and registered it like such:

DVI.DviDashboard = Ext.extend(Ext.TabPanel, {
initComponent: function(){
    Ext.apply(this, {
        activeTab: 0,
        items: [item1, item2]
    });

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

}
});

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

When rendered, I have a tabpanel with two tabs, item1 and item2. I would like to programatically add new tabs through the TabPanel’s add() method. I am unclear how to access the tabpanel’s methods however after extending.

Answer 1

I was creating the DviDashboard using xtype like this:

tabPanel = {xtype: dviDashboard}

The function I wrote to add tabs to this panel originally looked like this:

function buildDecisionMatrix() {

    var db = new DVI.DviDashboard();

    db.add({
       title: 'New Tab',
       xtype: 'grid',
       iconCls: 'tabs',
       html: 'Tab Body',
       closable: true
    });
    db.doLayout();
}

Problem was doLayout() was not rebuilding the panel with the tab. So I modified the creation of the tabPanel with an id:

tabPanel = {xtype: dviDashboard, id: 'dviDashboard'}

So I was able to get the tabPanel as a component. Then the function I build to add the tab was modified like so:

function buildDecisionMatrix() {

    //var db = new DVI.DviDashboard();

    var db = Ext.getCmp('dviDashboard')

    var newDb = db.add({
       title: 'New Tab',
       xtype: 'grid',
       iconCls: 'tabs',
       html: 'Tab Body',
       closable: true
    });
    db.doLayout();
    dv.setActiveTab(newDb);
}

And this worked. Thanks to all that responded.