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>

巴特西

extjs中的store

最新文章

热门文章