如何更新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个属性的对象,而不是对选项卡面板创建的选项卡的引用.

我将panel使用您的4个属性创建一个,并在选项卡面板中将该面板添加为子项.

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

然后选项卡面板应使用您的面板而不是创建自己的面板.

我没有测试过这段代码,但我希望它会对你有所帮助:)