ExtJS 嵌套标签面板答案

【问题标题】：ExtJS Nested tabpanelExtJS 嵌套标签面板
【发布时间】：2012-09-26 16:04:03
【问题描述】：

我创建了一个 ExtJS 嵌套选项卡面板，但我不知道如何切换嵌套选项卡。任何人都可以帮助我。非常感谢。

下面是我的js代码：

var clubs = new Ext.TabPanel({
    renderTo:'clubs',
    activeTab:0,
    autoHeight:true,
    defaults:{
      autoHeight:true,  
      cls:'tab-panel-item'  
    },
    items:[{
      title:'Shanghai',
      cls:'nested-tab',
      id:'shanghai-tab',
      items:{
        xtype:'tabpanel',
        defaults:{ cls:'tab-panel-item', autoHeight:true },
        containerCls:'nested-tab',
        activeTab:0, // required  
        items:[{
                    contentEl:'badminton',
                    title:'Badminton'
                },{
                    contentEl:'basketball',
                    title:'Basketball'
                }]  
      }  
    },{
      title:'Hangzhou',  
      cls:'nested-tab',  
      items:{  
        xtype:'tabpanel',  
        defaults:{ cls:'tab-panel-item', autoHeight:true },  
        containerCls:'nested-tab',  
        activeTab:0, // required  
        items:[{
                    contentEl:'hz-parent-child',
                    title:'Parent-child'
                },{
                    contentEl:'hz-football',
                    title:'Football'
                }]  
      }  
    }]
});

我试过activate()，但它只能切换父标签。

【问题讨论】：

标签： extjs

【解决方案1】：

我猜你正在使用 ExtJS 3.x ？您不想从哪里更改选项卡？

你可以使用 Ext.getCmp('Your-Tab-Panel-Id');

var clubs = new Ext.TabPanel({
    renderTo:'clubs',
    activeTab:0,
    autoHeight:true,
    defaults:{
      autoHeight:true,  
      cls:'tab-panel-item'  
    },
    items:[{
      title:'Shanghai',
      cls:'nested-tab',
      id:'shanghai-tab',
      items:{
        xtype:'tabpanel',
        id:'shanghai-tab-nested-first',
        defaults:{ cls:'tab-panel-item', autoHeight:true },
        containerCls:'nested-tab',
        activeTab:0, // required  
        items:[{
                    contentEl:'badminton',
                    title:'Badminton'
                },{
                    contentEl:'basketball',
                    title:'Basketball'
                }]  
      }  
    },{
      title:'Hangzhou',  
      cls:'nested-tab',  
      items:{  
        xtype:'tabpanel',  
        id:'shanghai-tab-nested-second',
        defaults:{ cls:'tab-panel-item', autoHeight:true },  
        containerCls:'nested-tab',  
        activeTab:0, // required  
        items:[{
                    contentEl:'hz-parent-child',
                    title:'Parent-child'
                },{
                    contentEl:'hz-football',
                    title:'Football'
                }]  
      }  
    }]
});

Ext.getCmp('shanghai-tab-nested-second').Activate(1);
Ext.getCmp('shanghai-tab-nested-first').Activate(1);

【讨论】：

谢谢 sra，我正在使用 Extjs 3.2。我想在单击按钮时更改标签。我试过Ext.getCmp()，但是我得到的组件是一个面板而不是tabPanel。
@CunruiLi 好吧，据我所知，您的代码中唯一的 Id 是指 Panel 而不是 TabPanel，因此我在示例中更改了这一点，以便 Id 属于 TabPanels 而不是包装面板
@CunruiLi 不客气！所以你可以将问题设置为已回答，不是吗？