Extjs3 动态生成grid

由于业务需要,grid列不确定的情况下,动态生成列及添加数据。 
基本流程是grid列的数据从后台先取得,然后填充列数据。 
代码片段如下: 

Js代码   收藏代码
  1. // 明细标题信息  
  2. var cmItems = [];  
  3. // 明细标题信息列model  
  4. var cm = new Ext.grid.ColumnModel(cmItems);  
  5. // 明细record信息  
  6. var cmRecord = [];  
  7. Ext.Ajax.request({  
  8.     url: 'xxxx/xxxxxxTitle',  
  9.     method: 'post',  
  10.     success: function(response, options){  
  11.         var cmtitle = [];  
  12.         var cmConfig = {};  
  13.         cmtitle = Ext.util.JSON.decode(response.responseText);  
  14.         // rowid  
  15.         cmConfig = new Ext.grid.RowNumberer()  
  16.         cmItems.push(cmConfig);  
  17.         // 商品属性  
  18.         cmConfig = {  
  19.             header: '商品属性',  
  20.             dataIndex: 'baccy_attribute',  
  21.             width: 100,  
  22.             sortable: true  
  23.         };  
  24.         cmItems.push(cmConfig);  
  25.         cmConfig = {  
  26.             name: 'baccy_attribute',  
  27.             type: 'string',  
  28.             mapping: 'baccy_attribute'  
  29.         };  
  30.         cmRecord.push(cmConfig);  
  31.         // 商品编码  
  32.         cmConfig = {  
  33.             header: '商品编码',  
  34.             dataIndex: 'baccy_v3_code',  
  35.             width: 100,  
  36.             sortable: true  
  37.         };  
  38.         cmItems.push(cmConfig);  
  39.         cmConfig = {  
  40.             name: 'baccy_v3_code',  
  41.             type: 'string',  
  42.             mapping: 'baccy_v3_code'  
  43.         };  
  44.         cmRecord.push(cmConfig);  
  45.         // 商品名称  
  46.         cmConfig = {  
  47.             header: '商品名称',  
  48.             dataIndex: 'baccy_name',  
  49.             width: 200,  
  50.             sortable: true  
  51.         };  
  52.         cmItems.push(cmConfig);  
  53.         cmConfig = {  
  54.             name: 'baccy_name',  
  55.             type: 'string',  
  56.             mapping: 'baccy_name'  
  57.         };  
  58.         cmRecord.push(cmConfig);  
  59.         //动态添加头信息***************************  
  60.         for (var i = 0; i < cmtitle.length; i++) {  
  61.             cmConfig = {  
  62.                 header: cmtitle[i].data,  
  63.                 dataIndex: cmtitle[i].column,  
  64.                 width: 120,  
  65.                 sortable: true  
  66.             };  
  67.             cmItems.push(cmConfig);  
  68.             cmConfig = {  
  69.                 name: cmtitle[i].column,  
  70.                 type: 'string',  
  71.                 mapping: cmtitle[i].column  
  72.             };  
  73.             cmRecord.push(cmConfig);  
  74.         }  
  75.         // id  
  76.         cmConfig = {  
  77.             name: 'goodsupplyId',  
  78.             type: 'string',  
  79.             mapping: 'goodsupplyId'  
  80.         };  
  81.         cmRecord.push(cmConfig);  
  82.         cm = new Ext.grid.ColumnModel(cmItems);  
  83.         //1.定义明细信息数据结构。  
  84.         var list_StudentRecord = Ext.data.Record.create(cmRecord);  
  85.         //按列排序。  
  86.         cm.defaultSortable = true;  
  87.         //2.定义明细list数据结构。  
  88.         var list_store = new Ext.data.Store({  
  89.             name: 'list_store',  
  90.             //设置服务器端映射。传入id作为查询条件。  
  91.             proxy: new Ext.data.HttpProxy({  
  92.                 autoLoad: true,  
  93.                 url: 'xxxx/xxxxxList'  
  94.             }),  
  95.             //autoLoad如果有值传入,那么store的load会自动调用,发生在autoLoaded对象创建之后  
  96.             //定义数据结构  
  97.             reader: new Ext.data.JsonReader({  
  98.                 totalProperty: 'totalProperty',  
  99.                 root: 'root'  
  100.             }, list_StudentRecord),  
  101.             remoteSort: false //True要求服务器提供一个更新版本的数据对象以便排序,反之就是在Record缓存中排序(默认是false)。  
  102.         });  
  103.           
  104.         //3.定义货源明细信息Grid。  
  105.         var list_grid = new Ext.grid.GridPanel({  
  106.             id: 'list_grid',  
  107.             store: list_store,  
  108.             region: 'center',  
  109.             loadMask: true,  
  110.             height: document.body.clientHeight - 80,  
  111.             cm: cm,  
  112.             //定义底部信息bar  
  113.             bbar: new Ext.PagingToolbar({  
  114.                 pageSize: 999,  
  115.                 store: list_store,  
  116.                 displayInfo: true  
  117.             })  
  118.         });  
  119.         //4画面load之前给变量赋值  
  120.         list_store.on('beforeload'function(){  
  121.             Ext.apply(this.baseParams, {  
  122.                 start: 0,  
  123.                 limit: 999,  
  124.                 goodsupplyId: baccy_provide_id  
  125.             });  
  126.         });  
  127.         //5.定义明细信息Form。  
  128.         var list_form = new Ext.form.FormPanel({  
  129.             id: 'list_form',  
  130.             labelAlign: 'center',  
  131.             frame: true,  
  132.             defaultType: 'textfield',  
  133.             width: document.body.clientWidth,  
  134.             height: document.body.clientHeight - 30,  
  135.             items: [list_grid]  
  136.         });  
  137.         //6.定义明细查询窗口。  
  138.         var list_win = new Ext.Window({  
  139.             id: 'list-win',  
  140.             modal: true// 模态窗口  
  141.             el: 'list-win',  
  142.             layout: 'fit',  
  143.               
  144.             width: document.body.clientWidth,  
  145.             height: document.body.clientHeight,  
  146.             title: '显示明细信息',  
  147.             closeAction: 'hide',  
  148.             items: [list_form],  
  149.             buttons: [{  
  150.                 text: '返回',  
  151.                 iconCls: 'goBack',  
  152.                 ref: '../gpBackButton',  
  153.                 handler: function(){  
  154.                     list_win.hide();  
  155.                     list_form.getForm().reset();  
  156.                 }  
  157.             }],  
  158.             listeners: {  
  159.                 'show'function(){  
  160.                     //window宽和高设定  
  161.                     Ext.getCmp('list-win').setWidth(document.body.clientWidth);  
  162.                     Ext.getCmp('list-win').setHeight(document.body.clientHeight);  
  163.                     //form宽和高设定  
  164.                     Ext.getCmp('list_form').setWidth(document.body.clientWidth);  
  165.                     Ext.getCmp('list_form').setHeight(document.body.clientHeight - 30);  
  166.                     //grid高设定  
  167.                     Ext.getCmp('list_grid').setHeight(document.body.clientHeight - 80);  
  168.                 }  
  169.             }  
  170.         });  
  171.     },  
  172.     // 取得货源明细标题信息失败方法。  
  173.     failure: function(){  
  174.     }  
  175. });  

后台请求title返回grid头列表,请求list返回和头相对应的列表。 

你可能感兴趣的:(ExtJs)