As we all know, it was a little difficult to get started with extjs, so I prepared this series after getting started.Article.
I personally think that using extjs as the background is very good and the layout is perfect!
1.Ext. MessageBox. Alert ()Method
There are four parameters. For the sake of simplicity, we mainly introduce the first three parameters:
Alert (Title,MSG,Function (){})
Title, MSG are mandatory parameters, and function is optional. this parameter is triggered when the pop-up window is closed.
Ext. MessageBox. Alert ( " Title " , " MSG " );
Ext. MessageBox. Alert ( " Title " , " MSG " , Function () {Alert ( " The close dialog box is displayed! " )});
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.
3.Ext. MessageBox.Prompt()Method
There are six parameters, one more return value and multiple rows than the preceding alert method.
Ext. MessageBox. Prompt ( " Title " , " MSG " );
Ext. MessageBox. Prompt ( " Title " , " MSG " , Function (E, text) {alert (E + " - " + Text );});
// Enter "qianxudetianxia" and click OK to bring up OK-qianxudetianxia
Ext. MessageBox. Prompt ( " Title " , " MSG " , Function (E, text) {alert (E + " - " + Text );}, This , True );
// True: 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 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 () andExt. MessageBox. updateprogress (value, "progresstext", "MSG ),
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.
So many MessageBox classes are available now! Look forward to the next chapter together...
