PDA

View Full Version : Z-index and Ext.layout



Saeven
20 Apr 2007, 12:42 PM
Hi Extfolk,

I have a good question for you...I have an Ext.layout set up, which loads a north/south split, like this:



var layout = new Ext.BorderLayout( $( 'kbcontainer' ) , {
center: {
autoScroll: true
},

south: {
split:true,
initialSize: 150,
minSize: 125,
maxSize: 350,
autoScroll:false,
collapsible:true,
titlebar: true
}
});
layout.beginUpdate();
layout.add( 'center', new Ext.ContentPanel( 'kbviewport' ) );
layout.add( 'south', new Ext.ContentPanel( 'kbtree', {title: 'Navigation', fitToFrame: true, closable: false } ) );
layout.endUpdate();


I'm loading some content into the kbviewport, that contains a div that I'm turning into a dialog box, a-la jackslocum.com blog:



<div id="comment-cn" style="visibility:hidden;position:absolute;top:0px;z-index:800;">
....
</div>


when I invoke the dialog box, which was created with:



new Ext.BasicDialog( "comment-cn", {
width:600,
height:450,
shadow:true,
minWidth:500,
minHeight:350,
autoTabs:true,
autoScroll:false,
tabTag: 'dt',
proxyDrag:true,
shim:true
});


It shows the dialog box inside of the layout manager's north panel (instead of the expected "on top of everything") and additionally sends the scroll bars to all hell inside of the north content panel.

How do I ensure that the Dialog gets shown with a very high Z index so that it shows above/outside the north 'kbviewport' content panel?

Thanks always
Alex

brian.moeskau
20 Apr 2007, 2:26 PM
Try rendering your dialog to the document.body. It cannot be rendered into a container that has a lower z-index than any part of your layout or you will have these sorts of issues.

Saeven
20 Apr 2007, 3:03 PM
Thanks for the note Brian.

I'll give it a try.