extjs-store数据加载

1、store本身提供了很多方法加载数据，比如将对象加载到store，可以用add方法，model或者对象数组加载到store，可以用loadData方法。
2、除此之外，store的配置autoLoad，和load方法可以异步加载数据，我分别通过jsonp跨域加载演示了这两个事例。当然通过ajax方式自然也是可以，这里就不做演示。

Ext.onReady(function(){
     Ext.define('User', {
         extend: 'Ext.data.Model',
         fields: [
             {name: 'firstName', type: 'string'},
             {name: 'lastName',  type: 'string'}
         ]
     });
     var mystore = Ext.create('Ext.data.Store', {
         model: 'User',
         data : [
             {firstName: 'Ed',    lastName: 'Spencer'},
             {firstName: 'Tommy', lastName: 'Maintz'},
             {firstName: 'Aaron', lastName: 'Conran'},
             {firstName: 'Jamie', lastName: 'Avins'}
         ]
     });
    //add( Ext.data.Model[]/Ext.data.Model... model ) : Ext.data.Model[]
    //添加 Model 实例到 Store. 本方法接收的参数可以是:
    mystore.add({firstName: 'tom',    lastName: 'tom'})
    //mystore.data --> Ext.util.MixedCollection
    //mystore.data.getRange() --> model[]
    mystore.data.getRange();
    //getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Model[]
    //返回指定索引范围内的记录.
    var modelarr = mystore.getRange();
    var arr = modelarr2arr(modelarr);
    Logger.printfarr(arr);
    //getAt( Number index ) : Ext.data.Model
    //获取指定index处的记录.
    Logger.printf(mystore.getAt(0).get('firstName'))
    //loadData( Ext.data.Model[]/Object[] data, [Boolean append] )
    //直接加载一个数组的数据到 Store 中.
    var arr = [ {firstName: 'jerry',    lastName: 'jerry'},
                {firstName: 'jerry',    lastName: 'jerry'},
                {firstName: 'jerry',    lastName: 'jerry'}];
    mystore.loadData(arr,true);
    Logger.printf(mystore.getCount())

    //--------------------store_jsonp_load------------------------
    Ext.define('User', {
         extend: 'Ext.data.Model',
         fields: [
             {name: 'id', type: 'int'},
             {name: 'name',  type: 'string'},
             {name: 'age',   type: 'int'},
             {name: 'email',  type: 'string'}
         ]
     });


     mystore = Ext.create('Ext.data.Store', {
         model: 'User',
         proxy: {
             type: 'jsonp',
             url: 'users.json',
             reader: {
                 type: 'json',
                 root: 'users'
             }
         }
     });
    mystore.load({
        scope: this,
        callback: function(records, operation, success) {
            // 对象 operation 包含
            // 所有 load 操作的详细信息
            Logger.printfobj(records[0].getData());
        }
    });
    //--------------------store_jsonp_autoload------------------------
    /*  mystore = Ext.create('Ext.data.Store', {
         model: 'User',
         proxy: {
             type: 'jsonp',
             url: 'users.json',
             reader: {
                 type: 'json',
                 root: 'users'
             }
         },
        //autoLoad : Boolean/Object
        //如果data属性未定义, 并且autoLoad值为'true'或对象, 则此store的load方法将在创建后自动执行. 
        //如果autoLoad值是一个对象, 这个对象将 作为参数传递给load方法. 默认为'false'.
         autoLoad: true
     });
    mystore.on({
        //load( Ext.data.Store store, Ext.data.Model[] records, Boolean successful, Object eOpts )
        load: function(store,records,successful){
            Logger.printfobj(records[0].getData());
        }
    }); */
})

    //obj--->model:model
    function obj2model(obj,model){
        if(!model.isModel||Ext.isEmpty(obj)||!Ext.isObject(obj))return null;
        var keyarr = Ext.Object.getKeys(model.getData())
        Ext.Object.each(obj, function(key, value, myself) {
            if(Ext.Array.contains(keyarr,key)){
                if(Ext.isObject(value)){
                    console.error('Objects can not contain objects');
                    return null;
                }   
                model.set(key,value||'')
            }
        });
        return model;
    }
    //arr--->model[]:model[]
    function arr2modelarr(arr,model){
        if(!model.isModel||Ext.isEmpty(arr)||!Ext.isArray(arr))return null;
        var modelarr = []
        Ext.each(arr,function(item){
             modelarr.push(obj2model(item,model));
        })
        return modelarr;
    }
    //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)
        }
    });

users.json:

Ext.data.JsonP.callback1(
    {
    users : [{
            id : 1,
            name : "Ed Spencer",
            age : 22,
            email : "ed@sencha.com"
        }, {
            id : 2,
            name : "tom",
            age : 22,
            email : "tom@sencha.com"
        }
    ],
    success : true
});