源代码下载地址:http://www.zuidaima.com/share/1724474768788480.htm
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 src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script> <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script> <link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/> <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>
项目截图
运行截图