CODEWITHSUNDEEP
extjs4.2
Mehran
Mehran

Reputation: 16901

Movable panel that stays in background while moving in ExtJS 4.2.1

I'm trying to create a floating window and a floating panel. Panel is to hold shortcuts (as in a desktop) and the window is like windows in a desktop environment. I want to be able to move the window and the panel both but I don't want ever the panel to come forth on the window (not in any situation). And I'm trying to do this in ExtJS 4.2.1. Here's the sample code:

Ext.create('Ext.panel.Panel', {
    draggable: true,
    floating: true,
    height: 250,
    width: 400,
    resizable: true,
    headerPosition: 'bottom',
    title: 'Desktop Shortcuts'
}).show();

Ext.create('widget.window', {
    height: 200,
    width: 400,
    title: 'Window'
}).show();

This code's problem is that, when you are trying to move the panel, it will come forth. Is there anyway I can get rid of that?

[SOLUTION]

It was just enough to set the floating property of panel to false. Since it is mentioned draggable it does not need floating to make the panel movable. And by disabling the floating property it won't ever come to front.

Upvotes: 0

Views: 2859

Answers (1)

Josh
Josh

Reputation: 760

You should be able to use extjs' z-index property to allow you to bring what you want to the front. You can use the z-index manager to register/manage your elements through it or you can set the z-index manually. A higher z-index should bring that element in front of a lower one.

panel.getEl().setStyle('z-index','80000');

Sencha Docs - ZIndexManager

stack overflow similar question (z-index)

Upvotes: 1

Related Questions