Ext动态表格的Json和Array实现方式

        鉴于表格的创建特别繁琐，extjs的论坛上有人用Dynamic Grid来做实现，但只是介绍了XML的形式。我就站在前人的肩膀上进行扩展吧。呵呵。

        创建Dynamic Grid代码如下:

1. // 重新扩展的grid组建
2. Ext.namespace("Ext.grid");
3. /**
4.  * 是否输出调试语句
5.  */
6. var __isDebug = true;
7. __log = function(str) {
8.     if (__isDebug) {
9.         try {
10.             Ext.log(str);
11.         } catch (e) {
12.         }
13.     }
14. };
15. var __hasChkBox = true;
16. var __hasRowNum = true;
17. var __chkbox = new Ext.grid.CheckboxSelectionModel();
18. /**
19.  * 动态创建表格
20.  * @param config 创建参数
21.  */
22. Ext.grid.DynamicEditorGridPanel = function(config) {
23.     
24.     //系统参数
25.     this.loadMask = {msg :'正在加载数据，请稍侯……'};
26.     this.bodyStyle = 'width:100%';      // 表格宽度为100%
27.     this.autoWidth = true;                  // 是否支持自动宽度
28.     this.height = 490;                          //
29.     this.autoHeight = false;                // 是否支持自动高度
30.     this.viewConfig = {forceFit :true}; //自动列宽
31.     this.collapsible = true;                    //
32.     this.containerScroll =  true;           //是否支持滚动条
33.     this.autoScroll = true;                     //是否自动出现滚动条
34.     this.stripeRows = true;
35.     this.animCollapse = true;
36.     
37.     //自定义表格参数
38.     this.hasPage = true;                            // 是否需要分页工具栏，默认为true
39.     this.pageSize = Ext.parameter.pageSize;// 分页大小
40.     this.pagePlace = 'bbar';                        // 分页工具栏位置
41.     this.hasChkBox = true;                      // 是否支持行复选框，默认为true
42.     this.hasRowNum = true;                  // 是否支持行自编号，默认为true
43.     this.metaMode = 'Json';
44.     
45.     //自定义数据参数
46.     this.readMode = 'Json';             //数据加载模式
47.     this.keyFild = '';                          // 关键字
48.     this.dataUrl = '';                      // 获取数据的URL
49.     this.totalProperty = 'totalProperty';
50.     this.root = 'rootList';
51.     this.metaFields = undefined;
52.     
53.     //自定义排序参数
54.     this.sort = true;                       //是否支持排序
55.     this.defaultSort = '';                  // 默认排序字段
56.     this.defaultDir = 'DESC';           // 默认排序方式
57.     
58.     //自定义分组参数
59.     this.group = false;                 //是否支持分组
60.     this.groupField = '';                   //默认分组字段
61.     
62.     for (var key in config) {
63.         //将前台的创建参数追个进行加载
64.         eval("this." + key + " = config." + key + ";");
65.     }
66.     Ext.grid.DynamicEditorGridPanel.superclass.constructor.call(this, this.renderTo,config);
67. };
68. /**
69.  * 动态创建表格实现
70.  */
71. Ext.extend(Ext.grid.DynamicEditorGridPanel, Ext.grid.EditorGridPanel, {
72.     /**
73.      * 初始化函数
74.      */
75.     initComponent : function() {
76.         
77.         //加载数据
78.         this.initStore();
79.         //是否支持复选列和自编号列
80.         __hasChkBox = this.hasChkBox;
81.         __hasRowNum = this.hasRowNum;
82.         //加入复选列模式
83.         if(__hasChkBox){
84.             this.selModel = __chkbox;   
85.         }
86.         //为查询框加入数据集
87.         this.initSearch();
88.         
89.         Ext.grid.DynamicEditorGridPanel.superclass.initComponent.call(this);
90.     },
91.     /**
92.      * 重写render函数
93.      * 创建一个空列
94.      * 创建数据装载事件
95.      */
96.     render : function() {
97.         //创建空列模型
98.         this.colModel = new Ext.grid.DefaultColumnModel( [ {
99.             header :"",
100.             dataIndex :""
101.         } ]);
102.         //创建数据加载时的事件
103.         this.store.addListener("load", this.doReconfiguration, this);
104.         //实现
105.         Ext.grid.DynamicEditorGridPanel.superclass.render.call(this);
106.     },
107.     /**
108.      * 调用动态创建列函数并将列加入表格view
109.      * 删除store的load装载事件
110.      */
111.     doReconfiguration : function() {
112.         var fields;
113.         if(this.metaMode === 'Json'){
114.             fields = this.store.reader.recordType.prototype.fields;
115.         }else if(this.metaMode === 'Array'){
116.             fields = this.metaFields;
117.         }
118.         this.colModel = new Ext.grid.DynamicColumnModel(this.store,fields,this.metaMode);
119.         this.view.bindColumnModel(this.colModel);
120.         this.view.refresh(true);
121.         this.colModel.defaultSortable = true;
122.         this.store.removeListener("load", this.doReconfiguration);
123.     },
124.     /**
125.      * 数据加载
126.      */
127.     initStore : function() {
128.         
129.         var     myUrl = this.dataUrl,
130.                 myField = this.defaultSort === '' ? this.keyFild : this.defaultSort,
131.                 myDirection = this.defaultDir,
132.                 myTotalProperty = this.totalProperty === '' ? 'totalProperty' : this.totalProperty,
133.                 myRoot = this.root === '' ? 'rootList' : this.root,
134.                 myPruneModifiedRecords = this.pruneModifiedRecords === true ? true : false;
136.         // 数据读取器用JSON方式读取数据
137.         var myReader; 
138.         
139.         switch (this.readMode) {
140.             case 'Json':
141.                 // 加载Json数据模式
142.                 myReader = new Ext.data.DynamicJsonReader( {totalProperty :myTotalProperty,root :myRoot});
143.                 break;
144.             case 'Xml':
145.                 // 加载Xml数据模式，待扩展
146.                 break;
147.             default:
148.                 break;
149.         }
150.         
151.         //pruneModifiedRecords 每次进行remove和load时清除modified记录，避免下次提交会把脏modified记录提交
152.         var myDs =  new Ext.data.Store( {url :myUrl,reader :myReader,pruneModifiedRecords: myPruneModifiedRecords});
153.         
154.         if(this.sort){
155.             //加载排序参数
156.             myDs.sortInfo = {field :myField,direction :myDirection};            //关键所在，要将排序字段赋给reader以备刷新所用
157.             myDs.remoteSort = true;
158.         }
159.         
160.         if(this.hasPage){
161.             var myLimit = this.pageSize;
162.              // 加载分页数据
163.             myDs.load( {
164.                 params : {
165.                     start :0,
166.                     limit :myLimit
167.                 }
168.             });
169.             //创建分页栏
170.             this.initPaging(myDs,myLimit);
171.         }else{
172.             // 加载全部数据
173.             myDs.load();
174.         }
175.         this.store = myDs;
176.     },
177.     /**
178.      * 为查询框加入数据集
179.      * 因为在前台加载grid的时候还没有创建store
180.      * 所以在本函数加载Ext.app.SearchField的数据store
181.      */
182.     initSearch :function() {
183.         var myStore = this.store;
184.         for(var i = 0;i < this.tbar.length; i++){
185.             if (this.tbar[i]  instanceof Ext.app.SearchField){//判断本按钮是否为Ext.app.SearchField的实例如果为实例则为其加入数据
186.                 var btn = this.tbar[i];
187.                 btn.store = myStore;
188.                 break;
189.             }
190.         }
191.     },
192.     /**
193.      * 加载分页
194.      */
195.     initPaging : function(myStore,myPageSize) {
196.         //判断是否需要创建分页栏
197.         var myBBar = new Ext.PagingToolbar( {
198.             pageSize :myPageSize, // 分页数
199.             store :myStore, // 填充数据
200.             displayInfo :true, // 是否显示文字信息
201.             displayMsg :'显示第 {0} 条到 {1} 条记录，一共 {2} 条', // 格式化文字信息
202.             emptyMsg :"没有数据记录..." // 没有数据时的提示
203.         });
204.         
205.         if(this.pagePlace === 'tbarANDbbar'){
206.             this.tbar = myBBar; // 加入顶部分页栏
207.             this.bbar = myBBar; // 加入底部分页栏
208.         }else if(this.pagePlace === 'tbar'){
209.             this.tbar = myBBar; // 加入顶部分页栏
210.         }else{
211.             this.bbar = myBBar; // 加入底部分页栏
212.         }
213.     },
214.     /**
215.      * 
216.      */
217.     getRecordType : function(){
218.         return this.store.reader.recordType;
219.     },
220.     /**
221.      * 取修改的起始列数
222.      */
223.     getStartEditColNum : function(){
224.         var num = 0;
225.         num = this.hasChkBox === true ? num + 1 : num;
226.         num = this.hasRowNum === true ? num + 1 : num;
227.         return num;
228.     }
229. });
231. /**
232.  * 重构JsonReader
233.  * @param config
234.  */
235. Ext.data.DynamicJsonReader = function (config) {
236.     Ext.data.DynamicJsonReader.superclass.constructor.call(this, config); 
237. }; 
238. Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
239.     readRecords:function (o) {
240.     
241.         for(var key in this.meta){
242.             if(eval('o.metaData.'+key) === undefined){
243.                 eval("o.metaData." + key + " = this.meta." + key + ";");
244.             }
245.         }
246.         
247.         return Ext.data.DynamicJsonReader.superclass.readRecords.call(this, o); 
248.     }
249. }); 
250.     
251. /**
252.  * 动态创建表格列
253.  * @param store
254.  */
255. Ext.grid.DynamicColumnModel = function(store,fields,metaMode) {
256.     var cols = [];
257.     var recordType = store.reader.recordType;
258.     // 添加自动编号列
259.     if (__hasRowNum) {
260.         var __rownum = new Ext.grid.RowNumberer({});
261.         cols[cols.length] = __rownum;
262.     }
263.     
264.     // 添加复选列
265.     if (__hasChkBox) {
266.         cols[cols.length] = __chkbox;
267.     }
269.     if(metaMode === 'Json'){
270.         for ( var j = 0; j < fields.keys.length; j++) {
271.             var fieldName = fields.keys[j];
272.             var field = recordType.getField(fieldName);
273.             createCols(field);
274.         }
275.     }else if(metaMode === 'Array'){
276.         for ( var k = 0; k < fields.length; k++) {
277.             createCols(fields[k]);
278.         }
279.     }
280.     /**
281.      * 创建列数组
282.      * @param field
283.      * @return  
284.      */
285.     function createCols(field){
286.         if(field.create === undefined || field.create === true){//默认和true时创建列
287.             var colsLength = cols.length;
288.             cols[colsLength] = {//
289.                 id :field.name, //String主要用于样式选择,如果已定义此属性,那么列所在的单元格会定义class为 x-grid-td-id
290.                 header :field.header, //String        头部显示的名称
291.                 dataIndex :field.name, //String        要绑定的Store之Record字段名
292.                 align :(field.align === undefined || field.align === '' || field.align === null) ? (field.type == ('int' || 'float') ? 'right' : 'left') : field.align, //String        css中的对齐方式
293.                 width :(field.width === undefined || field.width <=0 || field.width === null) ? undefined : field.width, //宽度
294.                 sortable :(field.sortable === undefined || field.sortable === true || field.sortable === null) ? true : false,//可排序
295.                 hidden :(field.hidden === undefined || field.hidden === false || field.hidden === null) ? false : true,//列是否隐藏
296.                 renderer :(field.renderer === undefined || field.renderer === '' || field.renderer === null) ? undefined : field.renderer,//事件
297.                 editor :(field.editor === undefined || field.editor === '' || field.editor === null) ? undefined : eval('Ext.util.Editor.'+field.editor+'Editor')
298.             };
299.         }
300.     }
301.     store.fields = store.reader.recordType.prototype.fields;
302.     Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
303. };
305. /**
306.  * 动态创建表格列实现
307.  */
308. Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});
310. /**
311.  * 绑定列事件
312.  * @param cm
313.  * @return
314.  */
315. Ext.grid.GridView.prototype.bindColumnModel = function(cm) {
316.     if (this.cm) {  
317.         this.cm.un("configchange", this.onColConfigChange, this);
318.         this.cm.un("widthchange", this.onColWidthChange, this);
319.         this.cm.un("headerchange", this.onHeaderChange, this);
320.         this.cm.un("hiddenchange", this.onHiddenChange, this);
321.         this.cm.un("columnmoved", this.onColumnMove, this);
322.         this.cm.un("columnlockchange", this.onColumnLock, this);
323.     }
324.     if (cm) {
325.         delete this.lastViewWidth;
326.         cm.on("configchange", this.onColConfigChange, this);
327.         cm.on("widthchange", this.onColWidthChange, this);
328.         cm.on("headerchange", this.onHeaderChange, this);
329.         cm.on("hiddenchange", this.onHiddenChange, this);
330.         cm.on("columnmoved", this.onColumnMove, this);
331.         cm.on("columnlockchange", this.onColumnLock, this);
332.     }
333.     this.cm = cm;
334. };

        该Dynamic Grid中实现了Json和Array两种形式动态创建表格(XML形式大家可以参考论坛上的例子)。

        先来介绍Array的实现方式:

1.  var fields = [
2.               {"create":false,"header":" 系统角色编号","name":"roleId",type:"int"}, 
3.               {"header":" 系统角色名称","name":"roleName"
4.               {"header":" 是否启用","name":"roleIsforbid"}, 
5.               {"header":" 备注","name":"mem"
6.           ];
7. 
     var grid = new Ext.grid.DynamicEditorGridPanel( {
         renderTo :'divGrid',
         keyFild :'roleId',//主键ID
         dataUrl :webPath + '/role!ByList.action',//后台取JSON数据的地址
8.       pruneModifiedRecords : true,
         metaFields : fields,//事先定义的数组
         metaMode :'Array'//动态创建表格的模式为'Array'模式
    });
    grid.render();

        再来介绍Json的实现方式:

1.     var grid = new Ext.grid.DynamicEditorGridPanel( {
2.         renderTo :'divGrid',
3.         keyFild :'roleId',
4.         dataUrl :webPath + '/role!ByList.action'
5.     });
6.     grid.render();

        在这里时应用了JsonReade里面的meta这个属性，所以后台一定要返回如下的数据格式:

  

1. {"metaData":{"fields":[{"header":"***","name":"**","type":"**"},{"header":"***","name":"**","type":"**"}……]},
2. "rootList":[{……}],"totalProperty":**}       

        需要注意的是，由于Dynamic Grid是在运行时生成ColumnModel，那么一旦Dynamic Grid的状态改变，如columnmove/columnresize/sortchange，当重新创建Dynamic Grid时（例如刷新页面后重新访问)，ext会试图先从cookie中读取状态信息，而此时ColumnModel还没有生成，系统就会报错。所以，可考虑关闭状态管理器，或重写Grid的applyState()方法,在里面判断this.colModel是否存在.

        需要注意的第二点是，如果用meta属性动态生成表格后的话.会出现一个不能正常排序的问题.我能想到的办法就是修改all-dug.js代码里面的内容。搜索“this.sortInfo = meta.sortInfo”这句修改为“this.sortInfo = this.sortInfo;”这样就可以正常运行了。

        到此就完成了，最近工作上实在太忙了，只能抽空先丢出来，写的不好，大家原谅。如果有什么问题可以通过QQ:272123239或是MSN:wego516@hotmail.com联系我。

        我会尽快完善代码。并上传实例和源码。