EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。
首先是为每一个页面定义一个类，再以EXTJS的规范格式增加所需的元素，可以使用所见所得的工具：extbuilder 来操作，这个类将以XXXXX.js的文件名保存，最后在相应的HTML页面中引入相关的JS和CSS文件：
1 <script type=" text/javascript " src="/EXTJS/ext-2.2/adapter/ext/ext-base.js "></script>
2 <script type=" text/javascript " src="/EXTJS/ext-2.2/ext-all-debug.js "></script>
3 <link rel=" stylesheet " type=" text/css " href=" /EXTJS/ext-2.2/resources/css/ext-all.css " />
4 <script type=" text/javascript " src= "XXXXX.js "></script>
并在BODY中加入下面这段JAVA SCRIPT：
01 <script>
02 Ext.onReady( function () {
03 Ext.QuickTips.init();
04 Ext.form.Field.prototype.msgTarget=*side*;
05 var viewport=new Ext.Viewport( {
06 layout : *fit*,
07 border : false,
08 items : [new system.XXXXX()]
09 });
10 viewport.render();
11 });
12 </script>
其中XXXXX就是之前新加的JS类，则EXT引擎就会以一定的非常漂亮的样式渲染出页面来，并且以后的页面风格要改变，只须更换CSS即可，无须改动页面。
附完整的代码：
PagingGridPanel.js
001 Ext.namespace(*system*);
002 system.PagingGridPanel = function(config) {
003 Ext.applyIf(this, config);
004 this.initUIComponents();
005 system.PagingGridPanel.superclass.constructor.call(this);
006 this.loadData();
007 };
008 Ext.extend(system.PagingGridPanel, Ext.Panel, {
009 initUIComponents : function() {
010 // BEGIN OF CODE GENERATION PARTS, DON*T DELETE CODE BELOW
011 this.store1 = new Ext.data.Store({
012 proxy : new Ext.data.MemoryProxy({
013 total : 2,
014 root : [{
015 age : 56,
016 name : "IOyFo"
017 }, {
018 age : 239,
019 name : "87tPp"
020 }]
021 }),
022 reader : new Ext.data.JsonReader({
023 root : "root",
024 total : "total",
025 id : "id"
026 }, [{
027 mapping : "name",
028 name : "name"
029 }, {
030 type : "int",
031 mapping : "age",
032 name : "age"
033 }])
034 });
035
036 this.gridPanel1 = new Ext.grid.GridPanel({
037 bbar : new Ext.PagingToolbar({
038 xtype : "paging",
039 emptyMsg : "No data to display",
040 displayMsg : "Displaying {0} - {1} of {2}",
041 store : this.store1
042 }),
043 selModel : new Ext.grid.RowSelectionModel({}),
044 columns : [{
045 header : "name",
046 dataIndex : "name",
047 sortable : true,
048 hidden : false
049 }, {
050 header : "age",
051 dataIndex : "age",
052 sortable : true,
053 hidden : false
054 }],
055 store : this.store1,
056 height : 200,
057 tbar : new Ext.Toolbar([{
058 handler : function(button, event) {
059 this.onButtonClick(button, event);
060 }.createDelegate(this),
061 text : "button"
062 }, {
063 handler : function(button, event) {
064 this.onButtonClick(button, event);
065 }.createDelegate(this),
066 text : "button2"
067 }])
068 });
069
070 Ext.apply(this, {
071 items : [this.gridPanel1]
072 });
073 // END OF CODE GENERATION PARTS, DON*T DELETE CODE ABOVE
074 },
075 loadData : function() {
076 this.store1.load();
077 },
078 onButtonClick : function(button, event) {
079 this.store1 = new Ext.data.Store({
080 proxy : new Ext.data.MemoryProxy({
081 total : 2,
082 root : [{
083 age : 56,
084 name : "88888"
085 }, {
086 age : 239,
087 name : "99999"
088 }]
089 }),
090 reader : new Ext.data.JsonReader({
091 root : "root",
092 total : "total",
093 id : "id"
094 }, [{
095 mapping : "name",
096 name : "name"
097 }, {
098 type : "int",
099 mapping : "age",
100 name : "age"
101 }])
102 });
103 this.store1.reload();
104 }
105 });
index.html
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
05 <script src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
06 <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script>
07 <link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
08 <script type="text/javascript" src="PagingGridPanel.js"></script>
09 </head>
10 <body>
11 <script>
12 Ext.onReady(function() {
13 Ext.QuickTips.init();
14 Ext.form.Field.prototype.msgTarget = *side*;
15 var viewport = new Ext.Viewport( {
16 layout : *fit*,
17 border : false,
18 items : [new system.PagingGridPanel()]
19 });
20 viewport.render();
21 });
22 </script>
23
24 </body>
25 </html>
项目截图
运行截图
原文：http://www.zuidaima.com/share/1724474768788480.htm