extjs中的store

1.store中重要的属性和方法

 属性：data、proxy、reader、url、root ....

 方法：load

2.理解：data--原料，proxy--运输车，reader--加工厂，store--仓库。入库后等待给grid使用。

 

 Ext.onReady(function(){
    var PersonRecord = Ext.data.Record.create([
        {name: 'name', type: 'string'},
        {name: 'sex', type: 'int'}
    ]);

    var data = [
        ['boy', 0],
        ['girl', 1]
    ];

    var store = new Ext.data.Store({                 //使用Store时要配置proxy,和reader
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, PersonRecord)
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: 'name', dataIndex: 'name'},
            {header: 'sex', dataInex: 'sex'}
        ],
        autoHeight: true,
        renderTo: 'grid'
    });

});

3.SimpleStore = Store + MemoryProxy + ArrayReader.

4.JsonStore = Store + HttpProxy + JsonReader.

5.如果配置了data，则proxy和url无效，且不需要调用load方法来生成Record集合 

    var ds = new Ext.data.SimpleStore({
        data: [
            ['id1','name1','descn1'],
            ['id2','name2','descn2']
        ],
        fields: ['id','name','descn']
    });

6.如果没有配置data,则必须设置proxy或url,或两者都设置。此时，如果没有将autoLoad设置为true，那么需要手动进行load方法的调用。

<script type="text/javascript">
Ext.onReady(function(){

        var store = new Ext.data.JsonStore({
            autoDestory:true,
            data:{ 'results': 2, 'rows': [
                { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
                { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
            ]},
            storeId: 'storeId01',
            root:"rows",
            fields: [
                {name: 'id', mapping:'id'},
                {name: 'name', mapping:'name'},
                {name: 'occupation', mapping:'occupation'},
            ]
        });

          var grid = new Ext.grid.GridPanel({
              renderTo: 'grid',
              autoHeight: true,
              store: store,
              columns: [
                {header: "id", width: 200, sortable: true,dataIndex: 'id'},
                {header: "name", width: 200, sortable: true,dataIndex: 'name'},
                {header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}
            ],
              bbar: new Ext.PagingToolbar({
                  pageSize: 10,
                  store: store,
                  displayInfo: true,
                  displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                  emptyMsg: "没有记录"
              })
          });
          store.load();

});
</script>