problem with tabs in dialog

[humpdi]

hey guys!

i have a layout dialog with two regions, west and center. in west i have a treeview, on which when i click a node theres opened a new tab in center region. that works fine. but now the problem:

if i close one tab, and want to reopen again by clicking again on this treenode, it throws an error: 'this.el has no properties'

im shure somebody else had have this problem before. please help me with that

thanks :)

[heidtmare]

try keeping one non-closable contentpanel in the center region. Maybe a welcome message or something.

[humpdi]

yeah i HAVE a non-closing tab with welcome message... but that doesnt fixes my problem :///

[humpdi]

var HelpCenter = function(){
var hc_dialog;


return {

showDialog : function(){

if(!hc_dialog){ // lazy initialize the hc_dialog and only create it once
hc_dialog = new Ext.LayoutDialog("helpcenter-dlg", {
modal:false,
width:600,
height:450,
shadow:true,
minWidth:300,
minHeight:300,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
autoScroll:true,
tabPosition: 'top',
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
hc_dialog.addKeyListener(27, hc_dialog.hide, hc_dialog);
hc_dialog.addButton(lang_helpcenter_closebutton, hc_dialog.hide, hc_dialog);

hc_layout = hc_dialog.getLayout();
hc_layout.beginUpdate();
hc_layout.add('west', new Ext.ContentPanel('helpcenter_treeview', {title: lang_helpcenter_west_content, closable: false}));
hc_layout.add('west', new Ext.ContentPanel('index', {title: lang_helpcenter_west_index, closable: false}));
hc_layout.add('center', new Ext.ContentPanel('welcome', {title: lang_helpcenter_center_welcome, closable:true,}));
hc_layout.getRegion('west').showPanel('helpcenter_treeview');

hc_layout.endUpdate();
}
hc_dialog.show();
},

loadContent : function(tab_id, tab_title){
hc_layout.add('center', new Ext.ContentPanel(tab_id, {title: tab_title, closable:true,}));
}

};
}();

[humpdi]

i need some help with this problem, and i dont know how to fix it :(
i think the problem is that if the tab is closed, it stays in the DOM and if i try to reopen again, it throws an error because the element (tab) already exists. so how can i fix this?

please help me with that!

[Joe]

I think what you are running into here is the fact that once the tab is closed then referenced tab_id is gone. A fix may be as simple as changing:



hc_layout.add('center', new Ext.ContentPanel(tab_id, {titl ...

to


hc_layout.add('center', new Ext.ContentPanel(Ext.id(), {autoCreate:true, titl ...
// notice autoCreate:true - think you will need that to create the panel on the fly


Let me know please.

Also look into ...
..... getEl().createChild({tag: ......

[humpdi]

thank you for reply :)

autoCreate true fixes that problem. but now i dont have no content in my tabpanel. the html is gone. hm, i will look for that tomorrow..

good night, and thanks for your help :)

[Joe]

Make sure you also updated to:
Ext.ContentPanel(Ext.id(),...............

[humpdi]

what should do that?

i give the function loadContent as a parameter 'tab_id' so it should open the tab with the topic i want through the click on a treeview node... if i do it with Ext.id() there is no content at all..

[Joe]

I will try to provide a sample that shows why you are crashing and how to not have it crash. I think this has to do with "spending the same div twice".

[humpdi]

yeah i think something like that could be the problem... i include a .php file in the div which provides the markup for the content in the panel... at the first opening of the tab the html is in the div as expected.. now when i close and reopen again there is no html inside the div anymore

[Joe]

Try this - in the
center: {

try to add
preservePanels : true;

See:
http://extjs.com/deploy/ext/docs/output/Ext.LayoutRegion.html

[humpdi]

ok now i have fixed it.. long way to it :-|

i will post my code for a better understanding.. if someone is interested in


/*************************************************/
/*** function to create and manage Help Center ***/
/*************************************************/
var HelpCenter = function(){
var hc_dialog;


return {

showDialog : function(){

if(!hc_dialog){ // lazy initialize the hc_dialog and only create it once
hc_dialog = new Ext.LayoutDialog("helpcenter-dlg", {
modal:false,
width:600,
height:450,
shadow:true,
minWidth:300,
minHeight:300,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
autoScroll:true,
tabPosition: 'top',
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true,
preservePanels: true
}
});
hc_dialog.addKeyListener(27, hc_dialog.hide, hc_dialog);
hc_dialog.addButton(lang_helpcenter_closebutton, hc_dialog.hide, hc_dialog);

hc_layout = hc_dialog.getLayout();
hc_layout.beginUpdate();
hc_layout.add('west', new Ext.ContentPanel('helpcenter_treeview', {title: lang_helpcenter_west_content, closable: false, fitToFrame:true, autoScroll:true}));
hc_layout.add('west', new Ext.ContentPanel('index', {title: lang_helpcenter_west_index, closable: false, fitToFrame:true, autoScroll:true}));
hc_layout.add('center', new Ext.ContentPanel('welcome', {title: lang_helpcenter_center_welcome, closable: false, fitToFrame:true, autoScroll:true, url: 'helpcenter/content/welcome.php'}));
hc_layout.getRegion('west').showPanel('helpcenter_treeview')

hc_layout.endUpdate();
}
hc_dialog.show();
},

loadContent : function(tab_id, tab_title){
if (!hc_layout.getRegion('center').showPanel(tab_id)){
hc_layout.add('center', new Ext.ContentPanel(tab_id, {title: tab_title, autoCreate:true, closable: true, fitToFrame:true, autoScroll:true, url: 'helpcenter/content/'+tab_id+'.php'}));
}
}

};
}();


thank you all for your help, specially you joe :)