ExtJS 4 "always on top" Window

extjs

Solution

In Ext.window.Window, there's a property called 'modal': set it to true.

Otherwise, use the WindowManager to manage your windows: in this case you have to follow the following steps:

- register your windows to the WindowManager (Ext.WindowManager.register (winId))

- use bringToFront method to set your window on top (Ext.WindowManager.bringToFront (winId))

- finally, check the element on top with the getActive method (Ext.WindowManager.getActive ())

E.g.:

Ext.create ('Ext.window.Window', {
  title: 'Your window' ,
  width: 300 ,
  height: 300 ,
  html: 'ciao ciao' ,
  modal: true
}).show ();

Or:

var win1 = Ext.create ('Ext.window.Window', {
  title: 'Your window' ,
  id: 'firstWin' ,
  width: 300 ,
  height: 300 ,
  html: 'ciao ciao' ,
});
win1.showAt (50, 50);

var win2 = Ext.create ('Ext.window.Window', {
  title: 'Your window' ,
  id: 'secondWin' ,
  width: 300 ,
  height: 300 ,
  html: 'I love pizza' ,
});
win2.showAt (60, 60);

// Register your floating objects (window in this case) to the WindowManager
Ext.WindowManager.register (win1);
Ext.WindowManager.register (win2);

// Bring 'firstWin' on top
Ext.WindowManager.bringToFront ('firstWin');

// Then, check the zIndexStack
alert (Ext.WindowManager.getActive().getId ()); // this is firstWin, the window with the highest zIndex

Hope this help you.

Cyaz

Problem

I need to implement Window which can be always on top. How can I to do it? All my tries with WindowManager give me no results :(

Original source

Related problems