PDA

View Full Version : Tab-Close destroys its contentEl ?



gronny
10 Mar 2010, 4:01 AM
Hi,
( first Post :D )

I got a very simple Ext.window with a toolbar . The window contains in a border-layout a Ext.panel in the west region , and a TabPanel in center .
The 'closable' tabs are loaded by the menuitems , the static ones have a 'contentEl' placed in index.html, others are built by tabPanels autoLoad from URLs with dynamic content.
Closing a tab with dynamic content works perfectly , it is always possible to add the same tab again to the tabPanel with same id, and the content is reloaded.
BUT when closing a tab with a static contentEl from index.html , and trying to add it a second time, the tab renders, but the contentEl seems to be destroyed by the close-action.
The documentation tells me the closing removes all concerning content ... fine .
Is the only way to implement closable tabs with static content by moving their content in multiple html files and do an autoLoad ? Or is it possible to save the contentEl before closing ?

Would someone please give me a hint ? Ext is most time still try and error with my only basic javascript knowledge :">

Kai

TabPanel and Window with its toolbar


tabpanelTEST2 = new Ext.TabPanel
({
id: 'id_TabPanelTEST2',
region: 'center',
activeTab: 0,
enableTabScroll:true,
layoutOnTabChange: true,
defaults: { autoScroll: true },
items: [{
id:'hilfe', title:'Hilfe', autoLoad:{ url:'hilfeAWD.html', params:'', text:'Seite wird angefordert ...' }, closable:true
},{
id:'uebersicht', title:'Uebersicht', autoLoad:{ url:'hohenlimburg.html', nocache: true, scripts: false, params:'', text:'Seite wird angefordert ...' }, closable:true
}]
});

var winTEST2 = new Ext.Window
({
id:'id_winTEST2',
...
closable:true, closeAction: 'hide',
autoScroll: true,
layout:'border',
items: [ navpanelTEST2,tabpanelTEST2 ],//
tbar:[ // Toolbar Beginn
{ // BUTTON Beginn
text: 'Uebersicht', icon: 'images/uebersicht.png', handler: function () { tabUEBERSICHT (); }
},'-',{ // MENU Wetterstationen Beginn
text:'Wetterstationen',
menu:{
items:[
'<b class="menu-title">Hohenlimburg -</b>',
{ text: 'Elsey', handler: function () { tabELSEY (); } },
{ text: 'Wesselbach', handler: function () { tabWB (); } },
'<b class="menu-title">Umgebung</b>',
{ text: 'HA - Hagen', handler: function () { tabHA1 (); } },
{ text: 'EN - Voerde', handler: function () { tabEN (); } },
{ text: 'MK - Iserlohn', handler: function () { tabMK (); } },
'<b class="menu-title">sonstiges</b>',
{ text: 'Lennepegel', handler: function () { tabPEGEL (); } }
]
}
}, // MENU Wetterstationen Ende
{ // MENU Dienste Beginn
text:'Dienste',
menu:{
items:[
{ text: 'Regenradar', handler: function () { tabRADAR (); } },
{ text: 'Satellitenbilder', handler: function () { tabSAT (); } },
{ text: 'DWD-Satelittenwetter', handler: function () { tabSATWETTER ();}},
{ text: 'Blitzortung', handler: function () { tabBLITZ (); } }
]
}
}, // MENU Dienste Ende
{ text: 'Hilfe', icon: '', handler: function () { tabHILFE (); } }
] // Toolbar Ende
}); // EO winTEST2
} // EO if

winTEST2.show();
});
two handler functions , which create the tabs


function tabHILFE () {
tabpanelTEST2.add ({ id:'hilfe', title:'Hilfe', closable:true,
autoLoad:{ url:'hilfeAWD.html', params: '', text:'Seite wird angefordert ...' }
}).show();
};

function tabSAT () {
tabpanelTEST2.add ({ id:'sat', title:'Satellitenbilder', closable:true, bodyStyle: { background: '#CAD9EC', padding: '7px' },
contentEl: 'dividTAB-SAT'
}).show();
};


http://www.gronny.de/screenshot1.gif