0

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.

Mehran
  • 15,593
  • 27
  • 122
  • 221

1 Answers1

1

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)

Community
  • 1
  • 1
Josh
  • 730
  • 7
  • 14
  • Pure CSS `z-index` won't do as the ExtJS engine will manipulate it when user tries to move the panel (it will be brought forth even if it's in background). And I have no experience using `ZIndexManager`. Do you have an example on how to use it? Thanks. – Mehran Jun 10 '13 at 14:05
  • 1
    My bad, I should have noted you would most likely have to use a manager. Here's a link to more info on how to achieve what you want using "register", "bringToFront", and others: http://stackoverflow.com/questions/10433925/extjs-4-always-on-top-window – Josh Jun 10 '13 at 15:36
  • I shall test this tomorrow but just to make sure that I got you correctly, what you are suggesting is that I should send my panel to back when it is released, right? Even though it could be a solution to my problem but I was hoping to find a solution more general. Like defining layers to contain windows where windows within the same layer can change order but a window in an upper layer would never exchange order with one from below layer. Or perhaps I'm asking too much! – Mehran Jun 10 '13 at 16:43
  • I'm not sure if you'll find that functionality built in. You could use the window or z-index manager to build that functionality yourself (perhaps) , but I don't know of anything like that built into Extjs directly. Here's the Sencha Docs info for the z-index manager as well http://all-docs.info/extjs4/docs/api/Ext.ZIndexManager.html – Josh Jun 10 '13 at 17:01
  • Thanks for your efforts but I solved my problem in another way. – Mehran Jun 13 '13 at 10:47
  • Glad to hear it! EDIT: just noticed you posted the solution in the OP. nice! – Josh Jun 13 '13 at 13:37