ExtJs learning notes Hello World! Page 1/2

After learning about the basics, you may use Ext + ajax to develop a simple small project. The project development process will be explained in 1.1 drops, hoping to bring you some benefits! Because I am also studying this framework, please give me some suggestions for this article, which may help me learn more.


If you see this picture, you may think it is a software, or Flash, Flex, silverlight, etc., but this is implemented by javascript + Css.



If you look at the style and effect in your project, the user's visual and operational experience should be very refreshing. There are more special effects.
Let's start with this component. ExtJs is a good Ajax framework written in javascript. We can see the effect above. We can apply ExtJs to any web development language. The client is very powerful. At the same time, Ext also provides a mechanism for interacting with the server, which is very convenient to use. The article on Ext interacting with the server will be written later.
Before the application we need to get this framework, you can go to the http://extjs.com/products/extjs/download.php official website to download, open source. After downloading and decompressing the package, you will get the following directory.


Adapter: maps the third-party underlying libraries (including the underlying libraries provided by Ext) to the underlying libraries supported by Ext.
Build: All Ext source code after compression (classified storage)
Docs: API help documentation
Examples: some examples of Extjs results
Resources: Ext UI resource file directory where css and images are stored
Source: No compressed Ext source code
Ext-all.js: Compressed Ext all source code, key files ah, more than 500 K
Ext-all-debug.js: no compression Ext all source code (for debugging)
Ext-core.js: core components, including all classes under source/core
Ext-core-debug.js: Core Components Without Compression

Next, we will perform a test on a pure static html page. To apply ExtJs, we need to first import three script files and one style sheet.

< Link rel = " Stylesheet " Type = " Text/css " Href = " Extjs/resources/css/ext-all.css "   />
< Script src = " Extjs/ext-base.js " Type = " Text/javascript " > </ Script >
< Script src = " Extjs/ext-all.js " Type = " Text/javascript " > </ Script >
< Script src = " Extjs/ext-lang-zh_CN.js " Type = " Text/javascript " > </ Script >

Here we want to explain,After the Extjs file is loaded, the function specified in Ext. onReady is executed., We can use simple code for a test.
<Script language = "javascarept">
Function start (){
Ext. MessageBox. alert ("OK", "Extjs framework loaded! ");
}
Ext. onReady (start );
</Script>
<Script language = "javascarept">
Ext. onReady (
Function {
Ext. MessageBox. alert ("OK", "Extjs framework loaded! ");
}
);
</Script>

The two methods can achieve the same effect.
Note:Ext. onReady (start) does not need to be added ().
Ext. MessageBox. alert ("OK","Extjs framework loaded!");Outputs a dialog box.
Ext. MessageBox. alert ('title', 'Pop-up content'); it can also be written as Ext. Msg. alert ('','');
The running effect is as follows:

An alert dialog box can be easily implemented using Extjs. Prompt ('',''); there are also relative application methods in Extjs.


Function Prompt (){
Ext. MessageBox. prompt (
"Input ",
"Input a number :",
Function (button, text ){
If (button = "OK ")
Ext. MessageBox. alert ("number", "the number is" + text );
Else
Ext. MessageBox. alert ("sorry", "the number is null .");
}
);
}
This syntax is slightly troublesome. Ext. MessageBox. prompt ('title', 'note: ', the function to be executed after completion). The executed function requires two parameters: button and text. The button is used to determine whether the user has selected the cancel or OK option. If it is OK, the value is 'OK '. Text is the input text.


Only two small examples are provided for illustration, and confim and other usage are similar.
There is also a common and easy-to-understand Window box.

You can drag this beautiful box and click X to close it.
The usage is as follows:

Function Window (){
Var win = new Ext. Window ({title: "hello", width: 300, height: 200, html: 'This is the body .'});
Win. show ();
}

Create an Ext. Window object and call the show method to display the object.
Ext. Window can be used to input many parameters in the constructor. Only the content displayed in the title, width, height, and body areas is used here.
NewExt. Window ({Title:"", Width:300, Height:200, Html:'This is the body.'});
Title: "" set the title
Width: 300 width
Height: 200
Html: 'xxxx' can place any html code