EXT Window and dialog box MessageBox

See the following code: Copy codeThe Code is as follows: var I = 0;
Function newWin (){
Var win = new Ext. Window ({
Title: "window" + I ++,
Width: 400,
Height: 300,
Maximizable: true
});
Win. show ();
}
Ext. onReady (
Function (){
Ext. get ("btn"). on ("click", newWin );
}
);

Html content on the page:
Execute the above Code. When you click the button "new window", a window is displayed on the page with the title "Window x". The window can be closed to maximize the value, click the maximize button to maximize the window. The maximized window can be restored, as shown in xxx.

Window Group
Windows are managed by groups. You can operate on a group of windows. By default, windows are in the default Ext. WindowMgr group. The window group is defined by Ext. WindowGroup. This class includes bringToFront, getActive, hideAll, sendToBack, and other methods to operate windows in the group.
See the following code:Copy codeThe Code is as follows: var I = 0, mygroup;
Function newWin (){
Var win = new Ext. Window ({
Title: "window" + I ++,
Width: 400,
Height: 300,
Maximizable: true,
Manager: mygroup
});
Win. show ();
}
Function toBack (){
Mygroup. sendToBack (mygroup. getActive ());
}
Function hideAll (){
Mygroup. hideAll ();
}
Ext. oReay (
Function (){
Mygroup = new Ext. WindowGroup ();
Ext. get ("btn"). on ("click", newWin );
Ext. get ("btnToBack"). on ("click", toBack );
Ext. get ("btnHide"). on ("click", hideAll );
}
);

Html code on the page
Execute the above Code and click the "new window" button several times to display several containers on the page, and then drag these windows to make them in different positions on the screen. Click the "put in the background" button to move the front window to the end of the window group. Click the "hide all" button to hide all opened windows. As shown in:

Dialog Box
The dialog box generated by traditional methods such as alert and confirm is not easy to read. Therefore, ExtJS provides a set of very beautiful dialogs that can be used to replace traditional alert and confirm to implement a gorgeous application interface.
The Ext dialog box is encapsulated in Ext. messageBox class, which is also abbreviated as Ext. msg, you can directly use Ext. messageBox or Ext. msg to directly call the corresponding dialog box method to display the Ext dialog box. See the following code:Copy codeThe Code is as follows: Ext. onReady (
Function (){
Ext. get ("btnAlert"). on (
"Click ",
Function (){
Ext. MessageBox. alert ("Please note", "this is the prompt box of ExtJS ");
}
);
}
);

Content on the Html page:
Execute the program and click the "alert box" button above. The dialog box shown in is displayed on the page.

In addition to alert, Ext also contains the confirm, prompt, progress, wait and other dialogs. In addition, we can display custom dialogs as needed. A normal dialog box generally includes four parameters. For example, the confirm method signature is confirm (String title, String msg, [Function fn], [Object scope]), and the parameter title indicates the dialog box title, the msg parameter indicates the prompt information in the dialog box. These two parameters are required. The optional fn parameter indicates the callback function executed after the dialog box is closed, and the scope parameter indicates the execution scope of the callback function. The callback function can contain two parameters: button and text. button indicates the clicked button. text indicates the text content entered when there is an active input option in the dialog box. In the callback function, we can use the button parameter to determine what options the user has made and use text to read the input content in the dialog box. See the following example:Copy codeThe Code is as follows: Ext. onReady (
Function (){
Ext. get ("btn"). on (
"Click ",
Function (){
Ext. MessageBox. confirm (
"Please confirm", "whether you really want to delete the specified content ",
Function (button, text ){
Alert (button );
Alert (text );
}
);
}
);
}
);

Html content:

Click the button in the dialog box to display the following dialog box. If yes or no is selected, the content of the button and text parameters in the callback function is output in the traditional prompt box.

Therefore, in actual application, the above Code can be changed to the following content:Copy codeThe Code is as follows: Ext. onReady (
Function (){
Ext. get ("btnAlert"). on (
"Click ",
Function (){
Ext. MessageBox. confirm (
"Please confirm ",
"Whether to delete the specified content ",
Function (button, text ){
If (button = "yes "){
// Perform the delete operation
Alert ("deleted successfully ");
}
}
);
}
);
}
);

In this way, when you click the yes button in the dialog box, the corresponding operation will be executed, and if you select no, the operation will be ignored.

Next let's look at the prompt box. Let's look at the following code:Copy codeThe Code is as follows: Ext. onReady (
Function (){
Ext. get ("btn"). on (
"Click ",
Function (){
Ext. MessageBox. prompt (
"Enter prompt box ",
"Enter your New Year's wishes :",
Function (button, text ){
If (button = "OK "){
Alert ("your New Year's wish is:" + text );
}
Else
Alert ("You gave up! ");
}
);
}
);
}
);

Html page:
Click the "dialog box" button above to display the content as shown in. If you click the "OK" button, the text you entered will be entered. If you select the "cancel" button, the system will prompt you to discard the input, as shown in:

In actual application, you can directly use the show method of MessageBox to display the custom dialog box, as shown in the following code:Copy codeThe Code is as follows: function save (button ){
If (button = "yes "){
// Save data
}
Else if (button = "no "){
// Do not save data
}
Else {
// Cancel the current operation
}
}
Ext. onReady (
Function (){
Ext. get ("btn"). on (
"Click ",
Function (){
Ext. Msg. show ({
Title: 'save data ',
Msg: 'You have performed some data operations. Do you want to save the changes to the current content? ',
Buttons: Ext. Msg. YESNOCANCEL,
Fn: save,
Icon: Ext. MessageBox. QUESTION
});
}
);
}
);

Click the "dialog box" button to display a custom "save data" dialog box, which contains the "yes", "no", and "cancel" buttons, you can execute the corresponding operations in the callback function save according to the clicked button, as shown in xx.