javascript - 如何更新 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 加载每个选项卡的内容，所以我不想动态添加 选项卡as suggested in this question但希望标签在第一次加载时可见，并且每个标签的内容在点击时动态更改。

创建标签后如何更改标签的内容？

更新:

感谢@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 作为 item 添加到选项卡面板时，选项卡面板初始化程序将根据 tab1 的属性创建一个选项卡。但是，您的 tab1 仍然是一个具有 4 个属性的对象，而不是对您的选项卡面板创建的选项卡的引用。

我将使用您的 4 个属性创建一个面板，并将该面板作为子面板添加到选项卡面板中。

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

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

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