大家好，又见面了，我是你们的朋友全栈君。
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();
});
项目截图
运行截图
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/150317.html原文链接：https://javaforall.net
![软考之路（三）—组成原理[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
