ExtJs 4 动态加载grid

   Ext.onReady( 
  function() { 
  

     Ext.Ajax.request({ 
  
         url: "/Sys_Module/GetGridInfo", 
  
         params: {}, 
  
         success:  
  function(response, config) { 
  
             json = Ext.JSON.decode(response.responseText);  //加载grid信息，具体json格式在下面 
  

              
  var Sys_RolePermissionList; 
  
              
  var Sys_RolePermissionStore; 
  
              
  // 
   功能模块grid展示 
  
            Sys_RolePermissionList =  
  function() { 
  
                  
  var url = "/Sys_RolePermission/List"; 
  
                  
  // 
  var sm = Ext.create('Ext.selection.RowModel'); 
  
 
  
                  
  // 
  grid 填充 
  
                Ext.define('Sys_RolePermissionGridModel', { 
  
                     extend: 'Ext.data.Model', 
  
                     fields: json.fieldsNames 
  
                 }); 
  

                  
  var groupingFeature = Ext.create('Ext.grid.feature.Grouping', { 
  
                     groupHeaderTpl: 'text1: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' 
  
                 }); 
  

                  
  // 
  grid获取 json数组 
  
                Sys_RolePermissionStore = Ext.create('Ext.data.Store', { 
  
                     pageSize: 10, 
  
                     model: 'Sys_RolePermissionGridModel', 
  
                     buffered:  
  true, 
  
                     groupField: 'text1', 
  
                     data: json.data, 
  
                     proxy: { 
  
                          
  // 
  actionMethods: 'post', 
  
                        type: 'memory' 
  
                          
  // 
  url: url, 
  
                         
  // 
                          reader: { 
  
                         
  // 
                              type: 'json', 
  
                         
  // 
                              root: 'root', 
  
                         
  // 
                              totalProperty: 'totalPorperty' 
  
                         
  // 
                          } 
  
                    }, 
  
                     sorters: [{ 
  
                         property: 'number', 
  
                         direction: 'DESC' 
  
 }] 
  
                     }); 
  
                     SaveSys_RolePermissionFn =  
  function() { 
  
                          
  var rowcount = grid.getStore().getCount(); 
  
                         console.log(rowcount); 
  
                          
  for (i = 0; i < rowcount; i++) { 
  
                             console.log(i); 
  
                              
  var abc = grid.getView().getNode(i); 
  
                              
  var childs = abc.children[3].children[0]; 
  

                             console.log(childs.childNodes.length); 
  
                              
  // 
  console.log(childs.innerHTML); 
  
                             
  for ( 
  var j = 0; j < childs.children.length; j++) { 
  
                                 console.log(childs.children[i].value + childs.children[i].checked); 
  
                             } 
  


                              
  // 
  var cell = grid.getView().getCell(i, 3); 
  
                             
  // 
  console.log(cell.outerText); 
  
 
  
                         } 
  


                     } 
  
                      
  // 
  grid配置 
  
                     
  var grid = Ext.create('Ext.grid.Panel', { 
  
                         id: "Sys_RolePermissionPanel", 
  
                         renderTo: "Sys_RolePermissionGrid", 
  
                         layout: "fit", 
  
                         alias: 'widget.methodPanel', 
  
                         columnLines:  
  true, 
  
                         loadMask:  
  true, 
  
                         frame:  
  true, 
  
                         border:  
  false, 
  
                          
  // 
  selModel: sm,   //选择框 
  
                        height: 400, 
  
                         autoScroll:  
  true, 
  
                         store: Sys_RolePermissionStore, 
  
                         ds: Sys_RolePermissionStore, 
  
                          
  // 
  sm: sm, 
  
                        columnLines:  
  true, 
  
                         plugins: [rowEditing], 
  
                          
  // 
  cm: sm, 
  
                        viewConfig: { 
  
                             stripeRows:  
  true, 
  
                             trackOver:  
  true, 
  
                             emptyText: '<div style="color:#999;margin:5px;">当前没有记录显示<div>' 
  
                         }, 
  
                         stripeRows:  
  true, 
  
                         tbar: [                      
  // 
  工具条设置 
  
                     { 
  
                      text: "新增", 
  
                      tooltip: "新增", 
  
                      iconCls: "addicon", 
  
                      handler: SaveSys_RolePermissionFn 
  
 }], 
  
                         columns: json.columModle 
  

                     }); 
  
                      
  // 
  Sys_RolePermissionStore.loadPage(1); 
  
                    grid.render(); 
  
                 } 
  
                 Sys_RolePermissionList(); 
  

             }, 
  
             failure:  
  function() { 
  
                 alert("sdf"); 
  

             } 
  
         }); 
  
     }); 
 

 

grid动态加载json为

 //后台返回json数组

   {'action': 
  true,'message':'error!', 
  
  'data':[ 
  
  {'number':'1','text1': '3','info1': '4','special1': '5'}, 
  
{'number':'2','text1': '3','info1': '4','special1': '<input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />'}, 
  
{'number':'3','text1': '3','info1': '4','special1': '<input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />'}, 
  
{'number':'4','text1': '3','info1': '4','special1': '5'} 
  
  ], 
  
  'columModle':[ 
  
  {'header': '序号','dataIndex': 'number','width':40}, 
  
  {'header': '编码','dataIndex': 'text1', editor: { 
  
                    xtype: 'checkbox', 
  
                    cls: 'x-grid-checkheader-editor' 
  
                }}, 
  
  {'header': '名称','dataIndex': 'info1', editor: { 
  
                    xtype: 'checkbox', 
  
                    cls: 'x-grid-checkheader-editor' 
  
                }}, 
  
  {'header': '金额','dataIndex': 'special1','width':300} 
  
  ], 
  
  'fieldsNames':[{name:'number'},{name:'text1'},{name:'info1'},{name:'special1'}] 
  
  }