Tab titles disappearing!

[gnosis]

Check this out:

HTML


<div id="libraryBrowserDialogContainer" style="visibility:hidden;">
<div class="x-dlg-hd">Library Browser</div>
<div class="x-dlg-bd">

<div class="x-dlg-tab" title="Modules">
<div class="inner-tab">
Hello...<br><br><br>

</div>
</div>

<div class="x-dlg-tab" title="Pages">
<div class="inner-tab">
... World!
</div>
</div>

</div>
</div>


JS:


var dialog;
if(!dialog){
dialog = new Ext.BasicDialog('libraryBrowserDialogContainer', {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show('center-peg');


This code is taken straight from the basic dialog example, with just a couple names changed, so I can't figure what the heck is wrong. When this code is triggered (by a menu item) the dialog opens and looks great. If I click the Close button, then click the menu item again to re-open it, the titles of the tabs are gone. What's up with that?

Thanks,
G

[jsakalos]

Any link where I could see it? Or a complete file that can be dropped into extjs/examples?

[gnosis]

Any link where I could see it? Or a complete file that can be dropped into extjs/examples?

Sure. http://visuality.com/test/jason/ext/dialogTest.php

This is a boiled down version of what I was trying to do in a larger app. I removed anything I could think of that might cause the issue, but it still occurs.

Not only do the tab titles disappear, but I also notice that the tabs swap places after the dialog has been closed once.

[jsakalos]

Your code creates new dialog each time it is run. Variable libraryBrowserDialog is local to the event handler so it's initialized every time the event handler runs.

[gnosis]

Your code creates new dialog each time it is run. Variable libraryBrowserDialog is local to the event handler so it's initialized every time the event handler runs.

Ok. I knew that, but I didn't consider how it would be a problem. I think I understand now, though. Thanks!

The first time the handler is run, it parses the divs and re-writes the dom, pulling out the titles, etc, and creating the dialog with the tabs. When the handler is run again, it re-inits the libraryBrowserDialog and tries to parse the x-dlg-tab divs again. But there aren't any anymore because the first run of the handler changed them.

[jsakalos]

Ok. I knew that, but I didn't consider how it would be a problem. I think I understand now, though. Thanks!

The first time the handler is run, it parses the divs and re-writes the dom, pulling out the titles, etc, and creating the dialog with the tabs. When the handler is run again, it re-inits the libraryBrowserDialog and tries to parse the x-dlg-tab divs again. But there aren't any anymore because the first run of the handler changed them.

Exactly, you must always create a dialog, a grid, a form, etc, only once.