Ext MessageBox usage

1. Ext. MessageBox. alert () method
There are four parameters: alert (title, msg, function () {}, this)
Title, msg are mandatory parameters, function is optional parameters, triggered after the pop-up window is closed, you can input the id of the button to be clicked, the fourth parameter scope: refers to the scope of the callback function.

Ext. Msg. alert ("Notice", "hello world! "); // Alert will block program execution, while alert of Ext is asynchronous execution
Ext. Msg. alert ("Notice", "<font color = red> hello world! </Font> "); // html format supported
Ext. Msg. alert ("Notice", "<font color = red> hello world! </Font> ", function callback (id) {alert ('What you clicked is '+ id );});

2. Ext. MessageBox. confirm () method

Basically the same as the alert () method. Note This:

Ext. MessageBox. confirm ("title", "msg", function (e) {alert (e );});
What is this parameter e? It is the value of the button in the pop-up box that you click. The same is true for the three values: yes, no, cancel. Alert (), but there are only two values: OK, cancel.

The callback function can pass in a unique parameter: the id of the button to be clicked. clicking the exit button will also trigger this event.

3. Ext. MessageBox. prompt () method
There are five parameters, which are one more line than the preceding alert method.

Ext. MessageBox. prompt ("title", "msg ");
Ext. msg. prompt ('notice', 'enter your name:', function callback (id, msg) {alert ('click button ID: '+ id +' \ n your input name is: '+ msg);}, this, false );
// Enter "javachen" and click "OK". The click ID is displayed. The name you entered is "javachen ".
Ext. messageBox. prompt ("title", "msg", function (e, text) {alert (e + "-" + text) ;}, this, true ); // true indicates multiple rows. this indicates the scope.
4. Ext. MessageBox. show () method
The configuration is more convenient than the previous method. There are many parameters. Here we will list the most common configuration parameters:

1. animEl: the animation effect when the dialog box is displayed or closed. For example, if it is set to "id1", the animation is displayed and generated from id1, and the contraction is opposite.
2. buttons: the buttons in the pop-up box are mainly set as follows: Ext. Msg. OK,
Ext. Msg. OKCANCEL,
Ext. Msg. CANCEL,
Ext. Msg. YESNO,
Ext. Msg. YESNOCANCEL
You can also customize the words above the button: {"OK", "I was originally OK"}. If this parameter is set to false, no buttons are displayed.
3. closable: If it is false, the upper right corner of the Cross-tree is not displayed. The default value is true.
4. msg: "message content"
5. Title: "title"
6. FN: Close the function executed after the pop-up box.
7. icon: the icon in front of the pop-up box. The value is Ext. MessageBox. info,
Ext. MessageBox. error,
Ext. MessageBox. Warning,
Ext. MessageBox. Question
8. Width: the width of the pop-up box, not in Unit
9. Prompt: Set to true. The pop-up box contains an input box.
10. multiline: if it is set to true, the pop-up box contains multiple input boxes.
11. Progress: Set to true to display the progress bar (but it is dead)
12. progresstext: The word displayed on the progress bar
13. Wait: Set to true to dynamically display progress
14. waitconfig: Configure parameters to control the display progress
Example:
Ext. msg. Show ({
Title: 'notice ',
MSG: 'enter your name! ',
Width: 300,
Prompt: True,
// Multiline: True,
// Wait: True,
// Progress: True,
// Progresstext: 'progress ',
Closable: True,
Modal: True,

Buttons: Ext. msg. okcancel,
Icon: Ext. msg. Info
});

5. Ext. MessageBox. Wait ()
Parameter MSG: Display Information title: Title config: configuration information
Example:
Ext. msg. Wait ('wait, the operation is in progress ', 'notic ');
Ext. msg. Wait ('Please wait, the operation is in progress! ', 'Notice ',
{
Text: 'processing ',
Duration: 2700, // the time before the progress bar is reset
Interval: 300, // time interval of the progress bar
Increment: 10, // number of parts in the progress bar
FN: function callback (){
Alert ("complete ");
}
});
6. Ext. MessageBox. Hide ()
Hides the displayed message box.
Parameter: None. Returns: Ext. MessageBox
7. Ext. MessageBox. updateprogress ()
Ext. messageBox. updateprogress (value, "progresstext", "MSG") // (three parameters, which indicate the progress of the progress bar.

8. Modify the default button text to Chinese
Ext. msg. buttontext = {
Yes: 'yes ',
No: 'no ',
OK: 'OK ',
Cancel: 'cancel'
};
Ext. msg. buttontext. Yes = 'yes ';
9. Dynamic dialog box
1) follow the new prompt text
VaR msgbox = ext. MessageBox. Show ({
Title: 'hup ',
MSG: 'dynamic and new info ',
Modal: True,
Buttons: Ext. msg. OK
})
// Ext. TaskMgr is a function class used to regularly execute programs,
// Here we use it to regularly trigger the update of the prompt information.
Ext. TaskMgr. start ({
Run: function (){
MsgBox. updateText ('moving time: '+ new Date (). format ('Y-m-d g: I: s '));
},
Interval: 1000
});
2) follow the new progress bar and prompt information
Var msgBox = Ext. MessageBox. show ({
Title: 'hup ',
Msg: 'dynamic and new progress bars and text text ',
Modal: true,
Width: 300,
Progress: true
})

Var count = 0; // number of times the scroll bar is refreshed
Var percentage = 0; // progress percentage
Var progressText = "; // progress bar Information

Ext. TaskMgr. start ({
Run: function (){
Count ++; // close the information prompt dialog box after 10 refresh
If (count> 10 ){
MsgBox. hide ();
}
// Computing progress
Percentage = count/10;
// Generate progress bar text
ProgressText = 'current completions: '+ percentage * 100 + "% ";
// Update information prompt dialog box
MsgBox. updateProgress (percentage, progressText,
'Current time: '+ new Date (). format ('Y-m-d g: I: s '));

},
Interval: 1000
});