[Solved (for now)] Ext.LayoutDialog modal strangeness

[TheNakedPirate]

I am try to use a layout dialog from a toolbar button on a tabpanel

(pretty much a cut and paste from the example)

My problem appears to be that the whole form is modal not just the bits that aren't the layout dialog. (the example works fine) is there something different with toolbar buttons over regular buttons that might have an effect on this dialog



myTabPanel.tableToolbar.addButton(
{
text: 'Add', cls: 'x-btn-text-icon add-opt', handler: function(o, e)
{
var myPanel = new Ext.LayoutDialog("myelement-dlg", {
animateTarget: 'myelement',
modal:true,
draggable: false,
width:400,
height:300,
shadow:true,
minWidth:300,
minHeight:300,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
myPanel.addKeyListener(27, myPanel.hide, myPanel);
myPanel.addButton('Submit', myPanel.hide, myPanel);
myPanel.addButton('Close', myPanel.hide, myPanel);

var myPanelLayout = myPanel.getLayout();
myPanelLayout.beginUpdate();
myPanelLayout.add('center', new Ext.ContentPanel('center'));
myPanelLayout.endUpdate();

myPanel.show();

}, scope: myTabPanel
});

[Animal]

The "myelement-dlg" element has to be a direct child of document.body. And modality affects the whole page.

[TheNakedPirate]

Its exactly as per the demo, same div(s) different id, but I take your point...something must be futzing with the z-level of the dialog.

[TheNakedPirate]

It looks like I have worked this out.

I have a layout for my whole page

when I put the dialog div element at the bottom of the document.body it isn't visible at all on show.

when I put it at the top of the document.body it works just fine on show.