Extjs Learning Series (1)-introduction and environment Installation

1. extjs Introduction

extjs is a Aja The x framework is written in JavaScript , create a Web application Program interface on the client. extjs can be used to develop Ria , that is, the Ajax application . extjs is mainly used to create a front-end user interface. It is a front-end Ajax framework unrelated to background technology. Therefore, you can use extjs in . net , JAVA , php , and other development language development applications. To put it bluntly, it is a reference written JavaScript Code , just like jquery.

2. extjs environment Configuration

• First, download an extjs package.

After decompression, take my 2.2 version as an example ..

 

 

Extjs Release package directory:

2. Adapter: Maps the third-party underlying libraries (including the underlying libraries provided by ext) to the underlying libraries supported by Ext.
4. Build: All the compressed ext Source Code (which is classified and stored ).
6. Docs: API help documentation.
8. Exmaples: Provides small instances made using extjs technology.
10. Resources: Ext UI resource file directory, where CSS and image files are stored.
12. Source: No compression ext all source code (which is classified for storage) complies with the lesser GNU (lgpl) Open Source protocol.
14. Ext-all.js: All source code of the compressed Ext.
16. Ext-all-debug.js: All source code of ext without compression (for debugging ).
18. Ext-core.js: Core Components of the compressed Ext, including all classes under sources/core.
20. Ext-core-debug.js: Core Components Without compressing Ext, including all classes under sources/core.

• Next, download the API documentation.
  I don't need to talk too much about it. There are functions and methods in it. Everything. Only in English. It seems that there is a traditional Chinese version. Look for it. Or consider online versions of documents.

   

  • Test Environment

  Introduce the following code in the page used:

   

  Code
    < Link REL = "Stylesheet" Type = "Text/CSS" Href = "Extjs/resources/CSS/ext-all.css"   />  
  < Script Type = "Text/JavaScript" SRC = "Extjs/adapter/EXT/ext-base.js" >
  </ Script >
  < Script Type = "Text/JavaScript" SRC = "Extjs/ext-all.js" >
  </ Script >

   

  3. Simple Application Testing

  No way. Starting from Hello world.

  • Normal edition Hello World

  Set the path according to your actual path. No nonsense.

  Code
  < Html >
  < Head >
  < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = iso-8859-1" >
  < Title > Hello World </ Title >
  < Link REL = "Stylesheet" Type = "Text/CSS" Href = "***/Resources/CSS/ext-all.css"   />
  < Script Type = "Text/JavaScript" SRC = "***/Adapter/EXT/ext-base.js" > </ Script >
  < Script Type = "Text/JavaScript" SRC = "***/Ext-all.js" > </ Script >
  < Script Type = "Text/JavaScript" >
  Ext. onready ( Function () {
  Alert ('Hello world!');
  } );
  </ Script >
  </ Head >
  < Body >
  </ Body >
  </ Html >

  If a pop-up window appears, the reference is successful.

   

  • Deluxe Edition Hello World

  Rewrite the function. Use the message box of the space.

  Code
  < Html >
  < Head >
  < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = iso-8859-1" >
  < Title > Hello World </ Title >
  < Link REL = "Stylesheet" Type = "Text/CSS" Href = "***/Resources/CSS/ext-all.css"   />
  < Script Type = "Text/JavaScript" SRC = "***/Adapter/EXT/ext-base.js" > </ Script >
  < Script Type = "Text/JavaScript" SRC = "***/Ext-all.js" > </ Script >
  < Script Type = "Text/JavaScript" >
  Ext. onready ( Function () {
  Ext. MessageBox. Alert ('Displayed message','Hello world !!');
  } );
  </ Script >
  </ Head >
  < Body >
  </ Body >
  </ Html >  

   

  The effect is as follows:

   

   

  Good results. You can also drag and drop. Specifically, why does message box and what functions it can implement. In message box, I will illustrate the API in detail. The two examples above demonstrate that the simple environment configuration is successful.

   

  2.References:

  ÜJavaeye

  ÜExtjs API

  ÜCold rain 《Extjs2.0Practical and concise tutorial

  ÜHumble world

  ÜExtjsChinam.com