extjs-grid数据加载

1、grid并没提供直接加载对象和对象数组的方法，但是可以通过其他的方式实现，所以我这里写了一个实现这样功能的方法arr2grid（即供参考）。grid只依赖一个store，所以受限，方法arr2grid，可以解决这个问题。
2、store配置autoLoad和使用load方法，都可以加载数据到store，grid依赖store，从而数据也就加载到grid上，本事例只是jsonp跨域加载store的事例。同样的ajax的方式也是可以的。

Ext.onReady(function () {
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    myGrid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],

        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 , field: {
                xtype: 'textfield',
                allowBlank: false
            }},
            { header: 'Phone', dataIndex: 'phone'}
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    myGrid.store.sort([
        { property: 'name',  direction: 'ASC' },
        { property: 'email', direction: 'DESC' }
    ]);
    //obj ---> grid
    var obj = { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  };
    obj2grid(obj,myGrid);
    //arr ---> grid
    var arr =[
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" }
        ];
    arr2grid(arr,myGrid);
    //*选择一行后*复制到控制台，才能看到效果
    var arr = selection2arr(myGrid)
    Logger.printfarr(arr);
    //--------------------grid_store_jsonp_autoload--------------------------
    var myStore = Ext.create('Ext.data.Store', {
        fields:['name', 'email', 'phone'],
        proxy: {
            type: 'jsonp',
            url : 'grid.json',
            reader: {
                type: 'json',
                root: 'items'
            }
        },
        autoLoad:true,
    });
    myStore.on({
        load: function(store,records,successful){
            var modelarr = store.getRange()
            var arr = modelarr2arr(modelarr);
            Logger.printfarr(arr);
            arr2grid(arr,myGrid);
        }
    })
    //--------------------grid_store_jsonp_load------------------------
    //都差不多，不多写了

})
    //grid(selection) --> arr
    function selection2arr(gird){
        var selection = myGrid.getSelectionModel().getSelection()
        var arr = [];
        Ext.each(selection,function(item){
            arr.push(item.getData());
        })
        return arr;
    }

    //arr --> grid : void
    function arr2grid(arr,grid){
        if ( Ext.isEmpty(arr) || !Ext.isArray(arr))return ;
        Ext.each(arr,function(item){
            obj2grid(item,grid)
        })
    }

    //obj --> grid : void
    function obj2grid(obj,grid){
        if (Ext.isEmpty(obj) || !Ext.isObject(obj)) return;
        var columnsArr = []
        var columns = grid.columns
        Ext.each(columns,function(item){
            columnsArr.push(item.dataIndex||'');
        });
        var objkeyArr = Ext.Object.getKeys(obj);
        var o = {};
        Ext.each(objkeyArr,function(item){
            if(Ext.Array.contains(columnsArr,item)){
                o[item] = obj[item]||''
            }
        });
        grid.store.add(o);
        var items = grid.store.data.items;
        Ext.each(items,function(item){
            item.data=item.raw;
        })
    }

    //model[]--->arr:arr
    function modelarr2arr(modelarr){
        if(Ext.isEmpty(modelarr)||!Ext.isArray(modelarr))return null;
        var arr = [];
        Ext.each(modelarr,function(item){
            if(item.isModel){
                arr.push(item.getData()||'')
            }
        })
        return arr;
    }



    //记录器
    Ext.define('Logger', {
        singleton : true,
        log : function (msg) {
            console.log(msg);
        },
        error : function (msg) {
            console.error(msg)
        },
        printferror : function (msg) {
            this.error(Ext.id('', 'num:') + '   ' + msg);
        },
        printf : function (msg) {
            this.log(Ext.id('', 'num:') + '   ' + msg);
        },
        printf2 : function (val, msg) {
            this.printf(val + '--' + msg);
        },
        printfobj : function (obj) {
            var s = '';
            if (Ext.isObject(obj)) {
                Ext.Object.each(obj, function (key, value, myself) {
                    s += key + ":" + (Ext.isObject(value) ? 'object' : value) + "  ";
                })
            }
            if (s)
                this.printf(s);
        },
        printfarr : function (arr) {
            var s = '';
            Ext.each(arr, function (item) {
                if (Ext.isObject(item)) {
                    Ext.Object.each(item, function (key, value, myself) {
                        s += key + ":" + (Ext.isObject(value) ? 'object' : value) + "  ";
                    })
                }
            });
            this.printf(s ? s : arr)
        }
    });

grid.json:

Ext.data.JsonP.callback1(
    {
    'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]
});