2012-09-26 98 views
1

我創建了一個ExtJS嵌套選項卡面板,但我找不到如何切換嵌套選項卡。任何人都可以幫助我。非常感謝。ExtJS嵌套tabpanel

下面是我的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' 
       }] 
     } 
    }] 
}); 

我嘗試激活(),但它只能切換父標籤。

回答

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

謝謝sra,我使用的是Extjs 3.2。我想在點擊按鈕時更改標籤。我試過Ext.getCmp(),但我得到的組件是一個面板而不是tabPanel。 – CunruiLi

+0

@CunruiLi嗯,據我看到你的代碼中唯一的Id引用一個面板而不是TabPanel,因此我在我的示例中更改了這個,以便該Id屬於TabPanels而不是包裝面板 – sra

+0

非常感謝。有用。 – CunruiLi