ExtJS learning -------- using WindowGroup (also called ZIndexManager) to operate components such as window

ExtJS learning -------- using WindowGroup (also called ZIndexManager) to operate components such as window

Specific implementation code: (Note: it is best to test each function separately during the test, and comment out other functions when testing a function, otherwise the effect will be affected ....) the WindowGroup object method can be viewed in its reference documentation, Documentation: http://download.csdn.net/detail/z1137730824/7748893 download View <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + PHByZSBjbGFzcz0 = "brush: java;"> Ext. onReady (function () {// use var wingroup = new Ext. ZIndexManager (); // both can be // var wingroup = new Ext. windowGroup (); // both can be for (var I = 1; I <= 5; I ++) // create five windows, {var win = Ext. create ('ext. window ', {// or Ext. window. windowtitle: 'Second + I + 'window', id: 'win _ '+ I, // The Window ID. Do not directly use a number to indicate width: 300, height: 300, renderTo: Ext. getBody ()}); win. show (); // display window wingroup. register (win); // refer to API/* re Gister (Ext. Component comp) * registers a floating Ext. Component through ZIndexManager. * Normally, this should not need to be called. * Floating components (such as Windows, BoundLists, and Menus) are automatically registered in zIndexManager during rendering. ** // Add some buttons below to introduce the main methods of WindowGroup (also called ZIndexManager) // hide all components var btn1 = Ext. create ('ext. button ', {text: 'hide all', renderTo: Ext. getBody (), handler: function () // The processing function {wingroup. hideAll (); // hide all managed components}); // display all components var btn2 = Ext. create ('ext. button ', {text: 'Show all', renderTo: Ext. getBody (), handler: function () // The processing function {wingroup. each (function (cmp) {// display all hidden components cmp. show () ;};}}); // Add a new component var winn = Ext. create ('ext. window ', {// or Ext. window. windowtitle: 'This is the new Window', width: 300, height: 300, renderTo: Ext. getBody ()}); winn. show (); // display the window var btn3 = Ext. create ('ext. button ', {text: 'add new Windows', renderTo: Ext. getBody (), handler: function () // The processing function {wingroup. addMembers (winn) ;}}); // place the specified component in front of any other active component. In this ZIndexManagervar btn4 = Ext. create ('ext. button ', {text:' Move the first 1st components to the frontend ', renderTo: Ext. getBody (), handler: function () // The processing function {wingroup. bringToFront ('win _ 1') ;}}); // put the component to the end var btn4 = Ext. create ('ext. button ', {text: 'move 5th widgets to the final', renderTo: Ext. getBody (), handler: function () // The processing function {wingroup. bringToFront ('win _ 5') ;}}); // put the component to the end var btn5 = Ext. create ('ext. button ', {text:' remove component from windowgroup ', renderTo: Ext. getBody (), handler: function () // The processing function {wingroup. unregister (winn); // After unbinding, the component will not be destroyed }});});
Running result:

(1) initial running result: five windows are added.

(2) Click "hide all ".

(3) Click "show all ".

(4) Add a new window (the window will be placed at the end by default)

(5) Move the first component to the frontend

(6) Move the fifth component to the end (similar to (5)

(7) Remove the component (remove but not delete the newly added component), and then click the result after hiding all