Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ExtJS 4 "always on top" Window

Tags:

extjs

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 :(

like image 474
Guy Fawkes Avatar asked May 03 '12 14:05

Guy Fawkes


1 Answers

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:

  1. register your windows to the WindowManager (Ext.WindowManager.register (winId))
  2. use bringToFront method to set your window on top (Ext.WindowManager.bringToFront (winId))
  3. 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

like image 72
Wilk Avatar answered Nov 01 '22 00:11

Wilk