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. Я хотел бы программно добавлять новые вкладки с помощью метода add () TabPanel. Мне неясно, как получить доступ к методам tabpanel после расширения.

Answer 1

Ваш экземпляр DVI.DviDashboard является Табличкой, поэтому вы можете обращаться с ним следующим образом:

var dashboard = new DVI.DviDashboard();
dashboard.add(otherTab);

ОБНОВЛЕНИЕ:

Убедитесь, что вы звоните tabPanel.doLayout() после добавления новой вкладки, чтобы вкладка отображалась и отображалась.Ext ждет вашего звонка doLayout(), если вы хотите добавить вкладки в пакетном режиме.

Answer 2

(украденный @ ответ амола)

Это будет так же просто, как вызвать .add в экземпляре.

В следующем примере вы можете проверить, как я могу получить доступ к экземпляру через this из изменения области действия. Вы можете узнать больше об обработке событий , ознакомившись с этим руководством

Пример кода: 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()
});

Answer 3

Я создавал DviDashboard, используя xtype следующим образом:

tabPanel = {xtype: dviDashboard}

Функция, которую я написал для добавления вкладок на эту панель, изначально выглядела так:

function buildDecisionMatrix() {

    var db = new DVI.DviDashboard();

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

Проблема была в doLayout () не восстанавливал панель с вкладкой.Поэтому я изменил создание tabPanel с идентификатором:

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

Так что я смог получить tabPanel в качестве компонента.Затем функция, которую я создаю для добавления вкладки, была изменена следующим образом:

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

И это сработало.Спасибо всем, кто откликнулся.

Answer 4

Этот код используется для добавления вкладки:

function buildDecisionMatrix() {

    var db = new DVI.DviDashboard();

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

Когда я выполняю функцию, DOM показывает созданную вкладку, но вкладка не отображается.Возможно, я вызываю метод doLayout () не по адресу?