Extjs动态创建grid

Ext.onReady(function(){

    var store;        //store
    var cm;           //columnModel
    var pagingBar;    //pagingBar
    var grid;         //grid
    var pageSize = 3; //pageSize

    /*
     * 创建store
     */
    var createStore = function(record){
        var arrayField = record.name.split(',');
        var str = "{'fields':[";
        for(var i=0;i<arrayField.length;i++){
            str=str+"{name:'"+arrayField[i]+"',mapping:'"+arrayField[i]+"'},";
        }
        var fields = str.substring(0, str.length-1)+']}';
        var jsonFields = new Ext.util.JSON.decode(fields);
        store = new Ext.data.JsonStore({
            url:path+'/SysPage/getList.json',
            baseParams:{start:0},
            root:'rows',
            totalProperty:'rowCount',
            fields:jsonFields.fields,
            autoLoad:true
        });
        store.on('beforeload',function(){
            Ext.apply(store.baseParams,{
                limit:pageSize
            });

        });
        return store;
    };
    /*
     * 创建column
     */
    var createColumn = function(record){
        var arrayHead = record.fieldName.split(',');
        var arrayIndex= record.name.split(',');
        var columnArray = new Array();
        var rowNumber = new Ext.grid.RowNumberer();
        columnArray[arrayIndex.length]=rowNumber;
        var str = "{'columnModle':[new Ext.grid.RowNumberer(),";
        for(var i=0;i<arrayIndex.length;i++){
            str =str+"{'header':'"+arrayHead[i]+"',dataIndex:'"+arrayIndex[i]+"'},";
        }
        str = str.substring(0, str.length-1)+"]}";
        var jsonColumn = new Ext.util.JSON.decode(str);
        cm = new Ext.grid.ColumnModel(jsonColumn.columnModle);
        return cm;
    };

    /*
     * 创建pagingToolbar
     */
    var createPage = function(store){
        pagingBar = new Ext.PagingToolbar({
            pageSize    : pageSize,
            store       : store,
            displayInfo : true
        });
        return pagingBar;
    };

    /*
     * 创建grid
     */
    var createGrid = function(record){
        store = createStore(record);
        cm = createColumn(record);
        pagingBar = createPage(store);
        grid = new Ext.grid.GridPanel({
            cm:cm,
            store:store,
            tbar:[{
                text:'查询',
                handler:function(){
                    store.load({params:{start:0}});
                    grid.getView().refresh();
                }
            },{
                text:'查看',
                handler:function(){
                    var record = grid.getSelectionModel().getSelected();
                    if(!record){
                        Ext.Msg.alert('tip','no data');
                    }else{
                        Ext.Msg.alert(record.get('name'),record.data.fieldName);
                    }
                }
            }],
            height:500,
            bbar:pagingBar,
            listeners:{
                'rowclick':function(grid,index,e){
                    var record = store.getAt(index).data;
                    Ext.Msg.alert(record.name,record.fieldName);
                }
            }

        });
        return grid;
    };
    /*
     * 创建viewport
     */
    var createViewport = function(record){
        grid = createGrid(record);
        return new Ext.Viewport({
            layout:'fit',
            items:[grid]
        });
    };

    /*
     * 获取表字段
     */
    Ext.Ajax.request({
        url:path+"/SysPage/getById.json",
        params:{id:'6'},
        success:function(response,options){
            var array = Ext.util.JSON.decode(response.responseText);
            if(array!=null&&array.data!=null){
                var record = array.data;//data是前台传递的JavaBean
                createViewport(record);
            }

        }
    });


});