javascript - ExtJS 3 使用注册组件的方法

Question

我扩展了一个选项卡面板并像这样注册它:

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);

渲染后，我有一个带有两个选项卡的选项卡面板，即 item1 和 item2。我想通过 TabPanel 的 add() 方法以编程方式添加新选项卡。然而，我不清楚扩展后如何访问选项卡面板的方法。

Answer 1

(盗用@amol 的答案)

这就像在实例上调用 .add 一样简单。

在下面的示例中，您可能想看看我如何通过 this 从范围更改中访问实例。您可能想阅读有关 event handling by checking out this manual 的更多信息。

示例代码:jsfiddle

var DVI = {};
DVI.DviDashboard = Ext.extend(Ext.TabPanel, {
    initComponent: function() {
        Ext.apply(this, {
            activeTab: 0,
            items: [{
                title: 'Tab 1',
                html: 'Tab 1'
            }, {
                title: 'Tab 2',
                html: 'Tab 2'
            }],
            buttons: [{
                text: 'Add Tab',
                handler: function() {
                    var content = 'Tab '+(this.items.getCount()+1);
                    this.add(new Ext.Panel({
                        title: content,
                        html: content 
                    }));
                    this.setActiveTab(this.items.getCount()-1);
                },
                //This 'this' is referring to your tabpanel, and by doing so,
                //the 'this' in your button's handler function is in fact the object
                //that you've set here, which is, the tabpabel itself.
                scope: this
            }]
        });

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

    }
});

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

var dviDashboard = new DVI.DviDashboard({
    renderTo: Ext.getBody()
});