PDA

View Full Version : update tab html content



titzu
11 Aug 2009, 2:15 AM
Hi,
a have a some tabs and somewhere else in the layout a button.
initially the tabs are not dynamically loaded but when I click the button I need to load content from a url.

Thanks in advance,
Titzu



var mainArea = {
title: 'Main Content',
collapsible: false,
region: 'center',
margins: '5 5 5 0',
xtype: 'tabpanel',
id: 'card-tabs-panel',
plain: true, //remove the header border
activeItem: 0,
defaults: {bodyStyle: 'padding:15px'},
items:[{
title: 'Tab 1',
id:'tab1',
autoScroll:true,
autoWidth:true,
html: 'This is tab 1 content.'
},{
title: 'Tab 2',
html: 'This is tab 2 content.'
},{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]

};
for the tab title I have and I need something similar for the tab content



handler: function(){
var panel = Ext.getCmp('tab1');
panel.setTitle('aaaaa');
}

Animal
11 Aug 2009, 2:30 AM
Load HTML?

That is not a good idea.

You should be thinking along the lines of creating new Ext Components (eg a FormPanel, or GridPanel, or whatever you want to see), and adding that directly to the TabPanel.

titzu
11 Aug 2009, 3:00 AM
thanx,
sounds like a good ideea but I need to integrate ext with zend framework and I want to load different views into that tab. Can those views contain extjs element that can be rendered into that tab?

something like



var panel = Ext.getCmp('tab1');
panel.setTitle('aaaaa');
panel.load({
url: 'http://localhost/module/controller/action',
//params: {param1: 'foo', param2: 'bar'},
discardUrl: false,
nocache: false,
text: 'Loading...',
timeout: 30,
scripts: false
});

Animal
11 Aug 2009, 3:18 AM
I know that people use the Zend framework to send Component configurations as JSON and not HTML, so that is possible.

You do not render

You create a new Component, then add it.

eg



var tp = Ext.getCmp('card-tabs-panel');
var g = new Ext.grid.GridPanel({....}); // you have to work this bit out
tp.add(g);
tp.setActiveTab(g);