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

i have tab panel this:

var tab1 = {     id: 'section1',     title: 'first section',     padding: 10,     html: '(this content replaced ajax load)' }  var tab2 = {     id: 'section2',     title: 'second section',     padding: 10,     html: '(this content replaced ajax load)' }  var tab3 = {     id: 'section3',     title: 'third section',     padding: 10,     html: '(this content replaced 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 tabpanel, dynamically change content of tabs, none of these work:

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

since want load contents of each of tabs via ajax, don't want add tabs dynamically as suggested in question want tabs visible first load , each tab's content changed dynamically when clicked.

how can change content of tab after has been created?

update:

thanks @chau catching oversight: when create tabs ext.panel instead of simple javascript object literals, works:

var tab1 = new ext.panel ({     id: 'section1',     title: 'first section',     padding: 10,     html: '(this content replaced ajax load)' });  var tab2 = new ext.panel ({     id: 'section2',     title: 'second section',     padding: 10,     html: '(this content replaced ajax load)' });  var tab3 = new ext.panel ({     id: 'section3',     title: 'third section',     padding: 10,     html: '(this content replaced 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 update'); //works 

when create tab1 object 4 properties. when add tab1 item tab panel, tab panels initializer create tab based on properties tab1. tab1 still object 4 properties , not reference tab created tab panel.

i create panel 4 properties , add panel child in tab panel.

var tab1 = new ext.panel({     id: 'section1',     title: 'first section',     padding: 10,     html: '(this content replaced ajax load)' }); 

then tab panel should use panel instead of creating own panel.

i haven't tested code, hope :)