EXTJS是一個兼容AJAX的前臺WEB UI的框架，在普通的HTML文件的 BODY 元素中無須寫任何HTML代碼，就能產生相應的表格等元素。
首先是為每一個頁面定義一個類，再以EXTJS的規范格式增加所需的元素，可以使用所見所得的工具：
extbuilder 來操作，這個類將以XXXXX.js的文件名保存，最后在相應的HTML頁面中引入相關的JS和CSS文件：
<script type="text/javascript" src="/EXTJS/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/EXTJS/ext-2.2/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/EXTJS/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="XXXXX.js"></script>
并在BODY中加入下面這段JAVA SCRIPT：
<script>
Ext.onReady(function() 
{
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var viewport = new Ext.Viewport( {
layout : 'fit',
border : false,
items : [new system.XXXXX()]
});
viewport.render();
});
</script>
其中XXXXX就是之前新加的JS類，則EXT引擎就會以一定的非常漂亮的樣式渲染出頁面來，并且以后的頁面風格要改變，只須更換CSS即可，無須改動頁面。
附完整的代碼：
PagingGridPanel.js
Ext.namespace('system');
system.PagingGridPanel = function(config) {
Ext.applyIf(this, config);
this.initUIComponents();
system.PagingGridPanel.superclass.constructor.call(this);
this.loadData();
};
Ext.extend(system.PagingGridPanel, Ext.Panel, {
initUIComponents : function() {
// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
this.store1 = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy({
total : 2,
root : [{
age : 56,
name : "IOyFo"
}, {
age : 239,
name : "87tPp"
}]
}),
reader : new Ext.data.JsonReader({
root : "root",
total : "total",
id : "id"
}, [{
mapping : "name",
name : "name"
}, {
type : "int",
mapping : "age",
name : "age"
}])
});
this.gridPanel1 = new Ext.grid.GridPanel({
bbar : new Ext.PagingToolbar({
xtype : "paging",
emptyMsg : "No data to display",
displayMsg : "Displaying {0} - {1} of {2}",
store : this.store1
}),
selModel : new Ext.grid.RowSelectionModel({}),
columns : [{
header : "name",
dataIndex : "name",
sortable : true,
hidden : false
}, {
header : "age",
dataIndex : "age",
sortable : true,
hidden : false
}],
store : this.store1,
height : 200,
tbar : new Ext.Toolbar([{
handler : function(button, event) {
this.onButtonClick(button, event);
}.createDelegate(this),
text : "button"
}, {
handler : function(button, event) {
this.onButtonClick(button, event);
}.createDelegate(this),
text : "button2"
}])
});
Ext.apply(this, {
items : [this.gridPanel1]
});
// END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
},
loadData : function() {
this.store1.load();
},
onButtonClick : function(button, event) {
this.store1 = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy({
total : 2,
root : [{
age : 56,
name : "88888"
}, {
age : 239,
name : "99999"
}]
}),
reader : new Ext.data.JsonReader({
root : "root",
total : "total",
id : "id"
}, [{
mapping : "name",
name : "name"
}, {
type : "int",
mapping : "age",
name : "age"
}])
});
this.store1.reload();
}
});
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="EXTJS/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="EXTJS/ext-2.2/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/EXTJS/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="PagingGridPanel.js"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var viewport = new Ext.Viewport( {
layout : 'fit',
border : false,
items : [new system.PagingGridPanel()]
});
viewport.render();
});
</script>
</body>
</html>
學習網站：
http://www.dojochina.com/