How can I update the content of a tab in an ExtJS TabPanel?

Question

I have a tab panel like this:

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

Then after creating this tabpanel, I would like to dynamically change the content of the tabs, but none of these work:

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

Since I want to load the contents of each of the tabs via AJAX, I don't want to add tabs dynamically as suggested in this question but want the tabs to be visible from the first load and each tab's content to be changed dynamically when clicked.

How can I change the content of a tab after it has been created?

Update:

Thanks @Chau for catching my oversight: when I create the tabs with Ext.Panel instead of simple javascript object literals, then it works:

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

Chau Chau · Accepted Answer · 2010-12-20T10:25:13

When you create tab1 it is an object with 4 properties. When you add tab1 as an item to your tab panel, the tab panels initializer will create a tab based on the properties from tab1. Your tab1 is still however an object with 4 properties and not a reference to the tab created by your tab panel.

I would create a panel with your 4 properties and add that panel as a child in the tab panel.

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

Then the tab panel should use your panel instead of creating its own panel.

I haven't tested this code, but I hope it will help you :)

How can I update the content of a tab in an ExtJS TabPanel?

2 Answers