Basic Analysis of extjs [Ext. MessageBox]

Younger brother is studying extjs recently! I made some notes during the study! I have collected a lot of information on the Internet, and it feels good! So I want to share it with you! As the younger brother is a new employee, he may not have done enough in some places! I hope you can give more advice and criticize me.

Okay! Next, go to the question! First, let's take a brief look at extjs.

Extjs comes from Yui, short for Yahoo user interface. It is a tool and control library written in JavaScript. Extjs is mainly used to develop rich Internet applications (RIA), rich client applications. In terms of the technology for implementing Ria, there are also two branches, one is the RIA application running in the browser plug-in represented by flex and Silverlight, and the other is extjs, bindows and others are representative of the rich client component technology Ria implemented using HTML, CSS and JavaScript. Extjs components are very likely to become the de facto UI standard for developing Ria applications, but to become a standard, two conditions must be met: first, a wide range of use. At this point, extjs performance is not so good, which is also an important reason why it has not become the webui standard. Second, the implementation is perfect and powerful, and extjs has basically done so. Of course! Don't forget this sentence: "No, it's better ". It is hoped that extjs fans will learn more about it and learn more about it, so that it can play a role in more projects.

Okay! Next, let me discuss Ext. MessageBox with everyone.

1. Ext. MessageBox. Alert () method
There are a total of four parameters. The following describes three parameters,
Alert (title, MSG, function () {}) Where title and MSG are mandatory parameters, function optional can be triggered after the window is closed.
Example: Ext. MessageBox. Alert ("title", "MSG ");
Example: Ext. MessageBox. Alert ("title", "MSG", function () {alert (e )});
Here, the E parameter is the value of the button you clicked in the pop-up box. There are two values: OK and cancel.

2. Ext. MessageBox. Confirm () method
Confrim () is the same as alert.
Example: Ext. MessageBox. Confirm ("title", "MSG", function (e) {alert (e );});
The parameter E is also the value of the button in the pop-up box you clicked. It is the same as alert, but it includes three: yes, no, cancel

3. Ext. MessageBox. Prompt () method
This parameter is more than the first two. This parameter has one return value and multiple rows than the alert method.
Example: ext. messageBox. prompt ("title", "MSG", function (E, text) {alert (E + "-" + text) ;}, this, true );
// If you enter "war3" and click OK, the OK-war3 will pop up
Example: ext. messageBox. prompt ("title", "MSG", function (E, text) {alert (E + "-" + text) ;}, this, true );
// This indicates that the scope of true is multiple rows.

4. Ext. MessageBox. Show () method
It has powerful functions and is more convenient to use than the previous method. It adopts the config configuration form and has many parameters.
(1). anime1: animation effect displayed and closed in the dialog box. For example, if it is set to "qingpingguo ",

, Animation, contraction is the opposite.
(2). Buttons: Set the button in the pop-up box: Ext. msg. OK
Ext. msg. okcancel
Ext. msg. camcel
Ext. msg. yesno
Ext. msg. yesnocancel
The above text can be customized. If it is false, no button is displayed.
(3). closable: If it is false, the upper right corner of the cross 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, with no 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 New hasprogress bar
(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
Here is an example:
Ext. MessageBox. Show ({
Title: "title ",
MSG: "message of content ",
Button: {"OK": "green apple does not show OK "},
FN: function (e) {alert (e );},
Animel: "test1 ",
Width: 300,
Icon: Ext. MessageBox. info,
Closable: false,
Progress: True,
Wait: True,
Progresstext: "progress bar"
// Prompt: True
// Multiline: True
});

5. Use of the progress bar in Ext. MessageBox. Show ()

First, you must know the two exception methods Ext. messageBox. hide () and ext. messageBox. updateprogress (value, "progresstext", "MSG") (three parameters, you can see what the name means ),
First: (the progress is controlled by the size of the progress, and the full progress is 10)
Ext. onready (function (){

Ext. Get ('btn1 '). On ('click', function (){
Ext. MessageBox. Show ({
Title: 'green app ',
MSG: 'green apple ...',
Width: 300,
Progress: True,
Closable: false,
});
VaR F = function (v ){
Return function (){
If (V = 11 ){
Ext. MessageBox. Hide ();
// Alert ("Loading complete! ");
} Else {
Ext. MessageBox. updateprogress (V/10, 'content loading, progress '+ V +'/10 ...');
}
};
};
For (VAR I = 1; I <12; I ++ ){
SetTimeout (f (I), I * 1000); // The timer starts from the click and runs once every second.
}
})
});

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}, // The 0.6s progress bar automatically loads a certain length
Closable: True
});
SetTimeout (function () {Ext. MessageBox. Hide ()}, 5000); // 5 then run the Close Window Function
}

Finally, the waitconfig parameter is described below:
1. interval: Frequency of progress
2. Duration: the duration of the execution progress. After this time is exceeded, the interval becomes invalid and no progress effect is generated, but the progress box does 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 the progress bar disappear
}},
Closable: True
});
// SetTimeout (function () {Ext. MessageBox. Hide ()}, 5000 );
}
);
The effect is the same.

OK! Ext. MessageBox is here to share with you. Although this article is relatively simple! However, the younger brother wrote something delicate! Haha! Okay! Next time I will share with you other things about extjs.

author: qingapple motto: constantly reflecting on yourself! Then change it! technologies of interest :. net, database, JavaScript, C #, Ajax, winform, jquery, extjs the source of this article: http://www.cnblogs.com/xinchun/ the copyright of this article belongs to the author and blog park a total, welcome to reprint, however, this statement must be retained without the author's consent and the original article connection is clearly displayed on the Article page. Otherwise, the legal liability shall be held accountable.