Create a new my directory in which all of the sample files will be created later in this directory.
1.Hello world!
First look at a extjs version of the Hello World page all the code:
Copy Code code as follows:
<title>extjs messagebox</title>
<link rel= "Stylesheet" type= text/css "href=". /resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base-debug.js "></script>
<script type= "Text/javascript" src= ". /ext-all-debug.js "></script>
<body>
<script type= "Text/javascript" >
Ext.blank_image_url = '.. /resources/images/default/s.gif ';
Ext.onready (function () {
Ext.MessageBox.alert (' Hello ', ' Hello World ');
});
</script>
</body>
Run, the results are as follows:
Note that the above introduced JS file order can not be reversed, otherwise can not get the correct results. 2.ext.messagebox
Ext.messagebox implements the common prompt box function. Ext.msg is exactly the same object as him, but the name is not the same. Ext.msg have common alert,confirm,promt,show and other methods, are very simple. Here is an example to illustrate. ExtJS function arguments can be separated by the usual comma list, or you can pass in an object with the parameter name: argument value. The following examples will also be reflected.
Copy Code code as follows:
<title>extjs messagebox</title>
<link rel= "Stylesheet" type= text/css "href=". /resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base-debug.js "></script>
<script type= "Text/javascript" src= ". /ext-all-debug.js "></script>
<script type= "Text/javascript" >
function Alertclick () {
Ext.Msg.alert ("alert", "Hello");
}
function Showoutput (s) {
var area = document.getElementById ("Output");
area.innerhtml = s;
}
function Confirmclick () {
Ext.Msg.confirm (' Confirm ', ' Choose one Please ', showoutput);
}
function Promptclick () {
Ext.Msg.prompt (' Prompt ', ' Try enter something ',
function (ID, msg) {
Showoutput (' You pressed ' + ID + ' key and entered ' + msg);
});
}
function Showclick () {
var option = {
Title: ' Box Show ',
Msg: ' This is a most flexible messagebox with an info icon. '
Modal:true,
Buttons:Ext.Msg.YESNOCANCEL,
Icon:Ext.Msg.INFO,
Fn:showoutput
};
Ext.Msg.show (option);
Showoutput ("Hi, a box is promting,right?");
}
</script>
<body>
<div id= ' Output ' ></div>
<p><button id= ' Button1 ' onclick= ' Alertclick () ' >AlertButton</button></p>
<p><button id= ' Button2 ' onclick= ' Confirmclick () ' >ConfirmButton</button></p>
<p><button id= ' Button3 ' onclick= ' Promptclick () ' >PromptButton</button></p>
<p><button id= ' Button4 ' onclick= ' Showclick () ' >ShowButton</button></p>
</body>
The parameters for each method of MSG are similar, primarily to set the title and prompt, and to set the button. Note that the MSG message box is not the same as the JavaScript default prompt box, and its pop-up does not prevent the rest of the code from executing. To execute some code after the pop-up is closed, you must pass in a function to it, FN. The last example shows this very clearly, and after the pop-up cue box, the following code is still executed, and the Showoutput function is executed after the pop-up box is closed:
