Ajax framework -- extjs

I. Overview:

Extjs is a very good Ajax framework that can be used to develop rich client applications with gorgeous appearances, making our B/S applications more dynamic and vital. Extjs is a front-end Ajax framework written in Javascript that is not related to background technology. Therefore, extjs can be used in applications developed in. net, Java, PHP, and other development languages. To use extjs, then first to get extjs library file, the framework is an open source, can be directly downloaded from the official website, URL: http://extjs.com/products/extjs/download.php

Ii. Use extjs to display tables

1. DownloadCodePackage, put it in your project, and then reference two JS files and a style file in the page

< 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 >

 

2. Compile the Event code:

< Script >
Function Showurl (value)

{

Return   " <A href = 'HTTP :// " + Value + " 'Target = '_ blank'> " + Value + " </A> " ;

}

Ext. onready (Function(){

var data = [[ 1 , ' QQ space ' , ' user.qzone.qq.com/3920.3011 ' ],

[ 2 , ' blog garden ' , ' zhuqil.cnblogs.com/ ' ],

[ 3 , ' Baidu Post Bar ' , ' tieba.baidu.com/F? KW = % BC % C6 % BF % c605104 % B0 % E0 ' ],

[4,'Hunan University of Arts and Sciences','Www.huas.cn']

VaR Store = New Ext. Data. simplestore ({data: data, fields :[ " ID " , " Name " , " Homepage " ]});

VaRGrid= NewExt. Grid. gridpanel ({

Renderto:"Hello",

Title:"Qilin",

Height:150,

Width:600,

columns: [{header: " " , dataindex: " name " , sortable: true },

{Header:"URL", Dataindex:"Homepage", Renderer: showurl, sortable:True}],

Store: store,

Autoexpandcolumn:1

});

});
</Script>

The preceding JS has two functions. The first one is to return an address. The second function is usually used by each user to obtain the extjs application from ext. starting with onready, it is equivalent to the main () function. In this function, we use "Var DATA =…" in the first line ..." Defines the data to be displayed in the table. This is a [] [] Two-dimensional array; the second line is "Var store = ..." It is used to create a data storage. This is the Configuration Attribute used by gridpanel. The data storage store is responsible for storing various data (such as two-dimensional arrays, JSON object arrays, and XML texts) the data record of the data record set converted to extjs. We will introduce the data storage store in the next chapter. Row 3 "Var grid = new Ext. Grid. gridpanel (...)" Create a table. The columns in the table are described by columns configuration attributes. columns is an array. each row of data elements describes a column of the table, the column information in the table includes the header text, the corresponding record set field (dataindex), The sorable column, and the column rendering function (Renderer) width, format, and so on. In the preceding column, only header and dataindex are used. Sortable: True indicates that this column can be sorted. Renderer: showurl is used to point to the first function and an HTTP address is returned.

3. Effect

 

Iii. Summary:

The extjs framework greatly improves the efficiency of web development. It is an Ajax framework that is very convenient to call the server using Ajax. It is worth learning.

Attachment: code + extjs package: http://files.cnblogs.com/zhuqil/ExtJS.rar