EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。

首先是为每一个页面定义一个类，再以EXTJS的规范格式增加所需的元素，可以使用所见所得的工具：extbuilder 来操作，这个类将以XXXXX.js的文件名保存，最后在相应的HTML页面中引入相关的JS和CSS文件：

并在BODY中加入下面这段JAVA 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();

});

其中XXXXX就是之前新加的JS类，则EXT引擎就会以一定的非常漂亮的样式渲染出页面来，并且以后的页面风格要改变，只须更换CSS即可，无须改动页面。

附完整的代码：

PagingGridPanel.jsExt.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

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();

});

项目截图

运行截图