How sets z-index to Ext.Panel (ExtJS)?

Question

I have problem with z-index (i think) in ExtJS. While drag and drop element from GridPanel to DataView I drop element over GridPanel and it dropped to DataView. But DataView have place under the GridPanel, and this imposible! Thx! (problem in all browsers)

Answer 1

Have you tried setting the z-index of your item to a higher order? ie.

Ext.Msg.show({
    title:'Request Failed',
    msg:"Error, The request was not found in the database",
    icon: Ext.MessageBox.ERROR,
    buttons: Ext.Msg.OK
});
Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000');

Answer 2

Windows

If you want to manage the zIndex for windows you can use the Ext.WindowManager. All windows are registered automatically to the window manager so you can do:

Ext.WindowManager.bringToFront(component)

or get the next zIndex

Ext.WindowManager.getNextZSeed()

All floating components

If the issue is with other floating components like the dragging stuff you can register the present components to a zIndexManager

var zIndexManager = new Ext.ZIndexManager;
zIndexManager.register(compA);
zIndexManager.register(compB);

Then you can do:

zIndexManager.sendToBack(comp);
zIndexManager.bringToFront(comp);

or manage it with:

zIndexManager.getNextZSeed();