zoukankan      html  css  js  c++  java
  • 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",  200, sortable: true,dataIndex: 'id'},
                    {header: "name",  200, sortable: true,dataIndex: 'name'},
                    {header: "occupation",  200,sortable: true, dataIndex: 'occupation'}
                ],
                  bbar: new Ext.PagingToolbar({
                      pageSize: 10,
                      store: store,
                      displayInfo: true,
                      displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                      emptyMsg: "没有记录"
                  })
              });
              store.load();
    
    });
    </script>
  • 相关阅读:
    poj3294 Life Forms(后缀数组)
    1628. White Streaks(STL)
    1523. K-inversions(K逆序对)
    1890. Money out of Thin Air(线段树 dfs转换区间)
    1350. Canteen(map)
    1521. War Games 2(线段树解约瑟夫)
    1003. Parity(并查集)
    1470. UFOs(三维树状数组)
    1471. Tree(LCA)
    1494. Monobilliards(栈)
  • 原文地址:https://www.cnblogs.com/yuyutianxia/p/3281534.html
Copyright © 2011-2022 走看看