如何在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]
});

然后在创建这个选项卡面板之后，我想动态更改选项卡的内容，但是以下任何一种方法都不起作用：

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

- Edward Tanguay

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)'
});

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

我没有测试过这段代码，但希望它能帮到您 :)

- Chau

Answer 2

modules_info_panel.get(0) 将返回第一个选项卡对象（默认为 Ext.Panel 实例），因此：

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

将设置新标题

- Mchl