如何更新ExtJS TabPanel中選項卡的內容？

Question

我有一個這樣的標簽面板：

var tab1 = {
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var tab2 = {
    id: 'section2',
    title: 'Second Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var tab3 = {
    id: 'section3',
    title: 'Third Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var modules_info_panel = new Ext.TabPanel({
    region: 'center',
    activeTab: 0,
    border: false,
    defaults:{autoScroll:true},
    items:[tab1, tab2, tab3]
});

然后在創建此tabpanel之后，我想動態更改選項卡的內容，但這些都不起作用：

tab1.html = 'new html'; // no effect
tab1.title = 'new title'; // no effect
tab1.update('new text'); // error: tab1.update is not a function
viewport.doLayout(); // no effect

由於我想通過AJAX 加載每個選項卡的內容，我不想按照此問題中的建議動態添加選項卡，但希望從第一個加載中看到選項卡，並且在單擊時動態更改每個選項卡的內容。

如何在創建選項卡后更改選項卡的內容？

更新：

感謝@Chau抓住我的疏忽：當我用Ext.Panel而不是簡單的javascript對象文字創建標簽時，它可以工作：

var tab1 = new Ext.Panel ({
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var tab2 = new Ext.Panel ({
    id: 'section2',
    title: 'Second Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var tab3 = new Ext.Panel ({
    id: 'section3',
    title: 'Third Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var modules_info_panel = new Ext.TabPanel({
    region: 'center',
    activeTab: 0,
    border: false,
    defaults:{autoScroll:true},
    items:[tab1, tab2, tab3]
});

tab1.update('new content with update'); //works

Answer 1

創建tab1它是一個具有4個屬性的對象。 將tab1作為項添加到選項卡面板時，選項卡面板初始化程序將根據tab1的屬性創建選項卡。 但是， tab1仍然是一個具有4個屬性的對象，而不是對選項卡面板創建的選項卡的引用。

我將創建一個包含4個屬性的panel ，並在選項卡面板中將該面板添加為子項。

var tab1 = new Ext.Panel({
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

然后選項卡面板應使用您的面板而不是創建自己的面板。

我沒有測試過這段代碼，但我希望它會對你有所幫助:)

Answer 2

modules_info_panel.get(0)將返回第一個tab對象（默認為Ext.Panel實例），因此：

 modules_info_panel.get(0).setTitle('new title');

將設置新標題