Look at the following code:
Copy Code code 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 in the page:
Execute the above code, when clicked button "New Window", will display a window in the page, the window title is "Window X", the window can be closed, can maximize, click the Maximized button will maximize the window, the maximized window can restore, as shown in Figure xxx.
window Grouping
Windows are grouped together to manipulate a set of Windows, which by default are in the default group Ext.windowmgr. window groupings are defined by class Ext.windowgroup, which includes methods such as BringToFront, Getactive, Hideall, and SendToBack to manipulate the windows in a group.
Look at the following code:
Copy Code code 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 in the page
To execute the above code, click on the "New Window" button several times, you can display several containers on the page, and then drag these windows to keep them in different positions on the screen. Then click the "Back" button to move the front window to the end of the group window, and click the "Hide All" button to hide all the currently open windows. As shown in the following illustration:
dialog Box
Because the traditional use of alert, confirm and other methods resulting in a dialog box is very old-fashioned, not good-looking. As a result, ExtJS provides a very nice set of dialog boxes that you can use to replace the traditional alert, confirm, and so on to achieve a gorgeous application interface.
Ext dialog boxes are encapsulated in the Ext.messagebox class, the class also has a shorthand form is ext.msg, you can directly through the Ext.messagebox or ext.msg directly invoke the corresponding dialog box method to display the Ext dialog box. Look at the following code:
Copy Code code as follows:
Ext.onready (
function () {
Ext.get ("Btnalert"). On (
"Click",
function () {
Ext.MessageBox.alert ("Please note", "This is the ExtJS's cue box");
}
);
}
);
Content in an HTML page:
Execute the program, click on the "Alert box" button above, will be displayed on the page as shown in the dialog box.
In addition to alert, Ext also contains dialog boxes for confirm, prompt, progress, wait, and so on, and we can display our own dialog boxes as needed. Common dialog boxes typically include four parameters, such as Confirm's method signature is confirm (string title, String msg, [Function fn], [Object scope]), argument title represents the title of the dialog box, and the parameter msg indicates The prompts in the dialog box, both of which are required, and the optional parameter FN represents the callback function that is executed when the dialog box is closed, and the scope of the parameter represents the execution scope of the callback function. The callback function can contain two parameters, that is, the button and Text,button, which is clicked, text represents the textual content that is entered when there is an active input option in the dialog box. We can use the button parameter in the callback function to determine what the user chooses, and you can read the content entered in the dialog box by text. Look at the following example:
Copy Code code as follows:
Ext.onready (
function () {
Ext.get ("Btn"). On (
"Click",
function () {
Ext.MessageBox.confirm (
"Please confirm", "Do you really want to delete the specified content",
function (Button,text) {
alert (button);
alert (text);
}
);
}
);
}
);
HTML content:
Clicking on the dialog button will appear in the following dialog box, and then select Yes or no to output the button and text parameters in the callback function using the traditional prompt box.
Therefore, in the actual application, the above code can be changed to the following content:
Copy Code code as follows:
Ext.onready (
function () {
Ext.get ("Btnalert"). On (
"Click",
function () {
Ext.MessageBox.confirm (
"Please confirm",
"Are you sure you want to delete the specified content?"
function (Button,text) {
if (button== "yes") {
Perform a delete operation
Alert ("Successful deletion");
}
}
);
}
);
}
);
So when the user clicks the Yes button in the dialog box, the action is performed, and the select No ignores the action.
Next look at the prompt box, we look at the following code:
Copy Code code as follows:
Ext.onready (
function () {
Ext.get ("Btn"). On (
"Click",
function () {
Ext.MessageBox.prompt (
"Enter a hint box",
"Please enter your New Year's Wish:",
function (Button,text) {
if (button== "OK") {
Alert ("Your New Year's Wish is:" +text);
}
Else
Alert ("You gave up typing!");
}
);
}
);
}
);
HTML page:
Click the "Dialog" button above to display the following picture, if you click the OK button will enter the text you entered, select the Cancel button will be prompted to give up the entry, as shown in the following figure:
in practice, you can use the MessageBox Show method directly to display a custom dialog box, such as the following code:
Copy code code as follows:
Funct Ion Save (Button) {
if (button== "yes") {
//Execute Data save operation
}
Else if (button== "no") {
//Do not save data
else{
//Cancel current action
}
}
Ext.onready (
function () {
Ext.get ("btn"). On (
' Click ',
Function () {
Ext.Msg.show ({
Title: ' Save Data ',
MSG: ' You have done some data manipulation, do you want to save the current content changes? ',
Buttons:Ext.Msg.YESNOCANCEL,
Fn:save,
Icon:Ext.MessageBox.QUESTION
};
}
);
}
); The
Click the dialog box button to display a custom Save Data dialog box that contains Yes, no, cancel three buttons, which you can do according to the button you clicked in the callback function save, as shown in Figure XX.
