PDA

View Full Version : How to change TabPanel ContenEl Dynamically?...



sam.arulprakash
16 Jun 2010, 9:37 PM
Hi all,


body.update('')==> Destroy my div.
I am in need to switch between the div, inside the tab panel.
instead of using body.update...is there any way to change contentEl in the tabPanel.

Thanks in advance.

My code.



<input id="Button2" type="button" value="Change" onclick="Change();" runat="server" />
<div id="tab1" style="background-color:Yellow;" class="x-hide-display">A simple tab1</div>
<div id="tab2" style="background-color:Red;" class="x-hide-display">Another one12</div>
<div id="Div1" style="background-color:Green;" class="x-hide-display">Another one12</div>
<script>
var tabPanel = new Ext.TabPanel
({
renderTo:'div_Tab',
activeTab: 0,
items: [{
id:'tab1_tab',
title: 'Tab 1',
contentEl:Ext.getDom('tab1')
},{
id:'tab2_tab',
title: 'Tab 2',
contentEl:Ext.getDom('tab2')
}]
});
</script>


</div>






function Change()
{
var tab1 = tabPanel.getItem('tab1_tab');
tab1.setTitle('Arul');
tab1.body.update('');
tab1.body.dom.appendChild(Ext.get('Div1').dom);
}
function Change2()
{
var tab1 = tabPanel.getItem('tab1_tab');
tab1.setTitle('Arul');
tab1.body.update('');
tab1.body.dom.appendChild(Ext.get('tab1').dom);
}