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'}]
  }