Search code examples
extjsextjs4

Get Tab of TabPanel by id or itemId


I have a TabPanel in my View with Tabs. How can I get the instance of a Tab in this Panel and which property should be set id or itemId?

Thanks

openProjectMetaTab: function(project) {
    var tabPanel = this.getTab();
    console.log(tabPanel);
    var mpItemId = 'project-metaTab-' + project.get('id')
    console.log('#'+mpItemId);
    var metaPanel = tabPanel.getComponent(mpItemId);
    console.log(metaPanel);
    if(!metaPanel) {
        tabPanel.add({
            title: project.get('title'),
            closable: true,
            items: [
                {
                    xtype: 'projectMetaForm',
                    itemId: mpItemId,
                },
            ],
        }).show();
    }
}

Solution

  • I would recommend using itemId because that way you don't have to worry about global id property conflicts. Per the documentation:

    "Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container"

    You can then use Ext.container.Container.getComponent to get your tabs.

    Here is an example from the posters updated question:

    openProjectMetaTab: function(project) {
        var tabPanel = this.getTab();
        console.log(tabPanel);
        var mpItemId = 'project-metaTab-' + project.get('id')
        console.log('#'+mpItemId);
        var metaPanel = tabPanel.getComponent(mpItemId);
        console.log(metaPanel);
        if(!metaPanel) {
            tabPanel.add({
                title: project.get('title'),
                closable: true,
                xtype: 'projectMetaForm',
                itemId: mpItemId
            }).show();
        }
    }