extjs--window

The main window in ext includes the Ext.window window and the Ext.messagebox dialog box.

Ext.window Window

Common properties of the 1.ext.window window:

2. Window Grouping:

Window groupings have the Ext.windowgroup class definition, which includes functions such as BringToFront (), getactive (), Hideall (), and SendToBack (), which can be used to manipulate the windows in a group.

<script type= "Text/javascript" >vari = 0;functionNewwin () {varid = i++; varWin =NewExt.window ({headerposition:' Right ', Title:"Window" +ID, Width:400, Height:300, maximizable:true    }); Win.show ();}functionToback () {Ext.WindowManager.sendToBack (Ext.WindowManager.getActive ());}functionHideall () {Ext.WindowManager.hideAll ();} Ext.onready (function() {Ext.get ("BTN"). On ("click"), Newwin); Ext.get ("Btntoback"). On ("click"), Toback); Ext.get ("Btnhide"). On ("click"), Hideall);}); </script> 
3. Place the various controls into the window:
Windows inherit from Ext.panel, so you can nest other components internally, such as forms, tables, and so on.
var New Ext.window ({        layout:' fit ',        width:max,        height:        closeaction: ' Hide ',        items: [grid],//here omitted the grid generated code        buttons: [{            text:' button '        } '    });    Win.show ();
The effect is as follows:
  
Ext.messagebox dialog box
1. Basic form of dialog box:
There are three main types of dialog boxes in ext:
Alert dialog Box                                                               Confirm dialog Box Prompt dialog box
  function (BTN) {        alert (' You have just clicked ' + btn);    });    Ext.MessageBox.confirm (function(BTN) {        alert (' you just clicked ' + btn);    });    Ext.MessageBox.prompt (function(btn, text) {        alert (' you just clicked ' + btn + ', just entered ' +  text);    });
2. More Settings for the dialog box:
Ext.MessageBox.show () can be used to implement various personalization of the dialog box, such as the original single-line input (TextField) into multiple lines of input (textarea), you can also modify the dialog box title and prompt content, customize the dialog box button
Ext.MessageBox.show ({        ' multi-line input box'        ,' You can enter several lines ',        width:        Buttons: Ext.MessageBox.OKCANCEL,        true,        function(btn, text) {            Alert (' you just clicked ' + btn + ', just entered ' + text ' );}    );    Ext.MessageBox.show ({        title:' Press a button '        ,' Choose one of the three buttons ',        buttons: Ext.MessageBox.YESNOCANCEL,        function(BTN) {            alert (' you just clicked ' + btn);        }    });
Progress bar:
In addition to using ext.messageboxprogress (), you can also directly use the Ext.MessageBox.wait (), the progress bar is automatically changed, without a timer to control, but it is unable to control the value of the progress bar precisely.
Ext.MessageBox.show ({title:' Please wait ', msg:' Read the data ', Width:240, Progress:true,//Open progress bar closable:false    }); varf =function(v) {return function(){            if(v = = 11) {Ext.MessageBox.hide (); }Else{Ext.MessageBox.updateProgress (v/10, ' reading the first ' + V + ', altogether 10. ‘);            }       };    };  for(vari = 1; I < 12; i++) {setTimeout (f (i), I*1000); }
Animation effect:
You can animate the dialog box to pop and close, use the Animalel parameter to specify an HTML element, and the dialog box to play the popup and close animations based on the specified HTML element.
extjs--window