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. camcel,
Ext. msg. yesno,
Ext. msg. yesnocancel
You can also customize the words above the button :{
"
OK
"
,
"
I was 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, excluding the 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. MessageBox. Show ({
Title:
"
Title
"
,
MSG:
"
Message of content
"
,
Buttons :{
"
OK
"
:
"I no longer show OK
"
},
FN:
Function
(E) {alert (e );},
Animel:
"
Test1
"
,
Width:
500
,
Icon: Ext. MessageBox. info,
Closable:
False
,
Progress:
True
,
Wait:
True
,
Progresstext:
"
Progress bar
"
//
Prompt: True
//
Multiline: True
});
4.Ext. MessageBox. Show ()
Use of progress bars in
First, you must know the two exception methods Ext. messageBox. hide () and ext. messageBox. updateprogress (value, "progresstext", "MSG") (three parameters, you can see the meaning of the name ),
Note that the value is the number between 0 and 1, indicating the progress of the progress bar.
First: (the progress is controlled by the size of the progress, and the full progress is 1)
Ext. Get (
"
Btn1
"
). On (
"
Click
"
,
Function
(){
Ext. MessageBox. Show ({
Title:
"
DF
"
,
MSG:
"
DFD
"
,
Progress:
True
,
Width:
300
,
Closable:
True
});
VaR
F
=
Function
(V ){
Return
Function
(){
If
(V
=
12
)
{
Ext. MessageBox. Hide ();
//
Alert ("Loading complete! ");
}
Else
{
VaR
I
=
V
/
11;
Ext. MessageBox. updateprogress (I, math. Round (
100
*
I)
+
"
% Completed
"
, I );
}
}
}
For
(
VaR
I
=
1
; I
<
13
; I
++
)
{
SetTimeout (f (I), I
*
500
);
//
The timer starts from the click, so 500 * I indicates that the task is executed every Ms.
}
}
);
Method 2: (control progress loading through fixed time)
Ext. Get (
"
Btn1
"
). On (
"
Click
"
,
Function
(){
Ext. MessageBox. Show ({
Title:
"
Time progress bar
"
,
MSG:
"
Close the progress box after 5s
"
,
Progress:
True
,
Width:
300
,
Wait:
True
,
Waitconfig: {interval:
600
},
//
0.6s progress bar automatically loads a certain length
Closable:
True
});
SetTimeout (
Function
() {Ext. MessageBox. Hide ()},
5000
);
//
5 and then execute the Close Window Function.
}
Finally, the waitconfig parameter is described below:
1
. Interval: The progress frequency.
2
. Duration: the duration of the execution progress. After this time is exceeded, interval becomes invalid and no progress effect is generated, but the progress will not disappear.
3
. FN: The function executed after the duration time
Therefore, another way to control the progress by time is as follows:
Ext. Get (
"
Btn1
"
). On (
"
Click
"
,
Function
(){
Ext. MessageBox. Show ({
Title:
"
Time progress bar
"
,
MSG:
"
Close the progress box after 5s
"
,
Progress:
True
,
Width:
300
,
Wait:
True
,
Waitconfig :{
Interval:
600
,
Duration:
5000
,
FN:
Function
(){
Ext. MessageBox. Hide ();
//
Make progress bar disappear
}},
Closable:
True
});
//
SetTimeout (function () {Ext. MessageBox. Hide ()}, 5000 );
}
);
The effect is the same.
