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>
  • 相关阅读:
    每天一个linux命令(39):grep 命令
    每天一个linux命令(44):top命令
    每天一个linux命令(42):kill命令
    每天一个linux命令(41):ps命令
    每天一个linux命令(55):traceroute命令
    每天一个linux命令(45):free 命令
    为什么程序员的价值总是被严重的低估?
    每天一个linux命令(54):ping命令
    每天一个linux命令(46):vmstat命令
    每天一个linux命令(48):watch命令
  • 原文地址:https://www.cnblogs.com/yuyutianxia/p/3281534.html
Copyright © 2011-2022 走看看