Geek Answers Handbook

How to update tab contents in ExtJS TabPanel tab?

I have a tab bar:

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, having created this tab, I would like to dynamically change the contents of the tabs, but none of them 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 using AJAX , I do not want to dynamically add add tabs as suggested in this question , but you want the tabs to be visible from the first load , and each tab is dynamically changed when you press.

How can I change the contents of a tab after creating it?

Update:

Thanks @Chau for catching my control: when I create tabs with Ext.Panel instead of simple JavaScript object literals, 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
+6
javascript extjs tabpanel
source share
2 answers

When creating tab1 this is an object with 4 properties. When you add tab1 as an element to the tab bar, the tab bar initializer will create a tab based on the properties from tab1 . However, your tab1 is an object with 4 properties, not a link to the tab created on the tab.

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

 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 bar should use your bar instead of creating your own bar.

I have not tested this code, but I hope it helps you :)

+6
source share

modules_info_panel.get(0) will return the first tab object (the default instance is Ext.Panel), therefore:

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

set a new header

0
source share

More articles:


All Articles