Create a new my directory, and all subsequent sample files will be created in this directory.
1. Hello world!
Let's take a look at all the code for an Extjs Hello World webpage:
Copy codeThe Code is as follows:
<Html>
<Head>
<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>
</Head>
<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>
</Html>
The result is as follows:
Note that the sequence of js files introduced above cannot be reversed, otherwise the correct results cannot be obtained. 2. Ext. MessageBox
Ext. MessageBox provides common prompt box functions. Ext. Msg is an object exactly the same as it, but its name is different. Ext. Msg has common alert, confirm, promt, show and other methods, which are very simple. The following is an example. Function parameters of Extjs can be separated by a comma or an object with the parameter name: parameter value. The example below will also be shown.
Copy codeThe Code is as follows:
<Html>
<Head>
<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 ('propt', '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>
</Head>
<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 = 'proptclick () '> PromptButton </button> </p>
<P> <button id = 'button4' onclick = 'showclick () '> ShowButton </button> </p>
</Body>
</Html>
The parameters of each Msg method are similar, mainly including setting the title and prompt, and setting the button. Note that the message box of Msg is different from the default prompt box of javascript. Its pop-up does not prevent execution of other codes. To execute some code after the pop-up box is closed, you must input a function fn to it. The last example clearly shows this. After a prompt box is displayed, the following code is still executed. When the pop-up box is closed, the showOutput function is executed: