Featured post
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 :)
- Get link
- X
- Other Apps
Comments
Post a Comment