当前位置:Web前端 > extjs> 正文

ExtJs中Store的种类

时间:2014-5-17类别:Web前端

ExtJs中Store的种类

ExtJs中Store的种类

一、什么store


Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类),最终主要用于提供给panel去显示.


Store由Proxy(数据源)和DataReader(解读数据)组成


1(Proxy)数据源:一般是后台的值,习惯性的把它转换成json对象给store

2、(DataReader)读取数据:获得了数据后需要解析数据,DataReader(fields属性其实是Record对象的)解析数据并指定格式.

 

二、store传参的几种方法

  •  
  • JScript 代码   复制
  • //第一种
    var store = new Ext.data.Store({
        baseParams: {
            params1 : '1',
            params2 : '2'
        }
    });
    //第二种
    var params = {start:0,limit:limit};
    store.load({params: params});
    //第三种
    store.load({
        params:{
            start:0,
            limit:10
        }
    });
    //第四种
    store.baseParams=params;
    
    		
  •  

    三、Ext.data.Store实例

  •  
  • JScript 代码   复制
  • 
    var store = new Ext.data.Store({
        /*
            proxy的作用是通过内存获取原始数据,然后将获取的数据交给对应的读取器进行处理
            MemoryProxy只能从Javascirp对象获取数据,可以直接把数组或者JSON和XML格式的数据交给他处理
        */
        proxy : new Ext.data.MemoryProxy([
            ['tom',18],
            ['cat',20]
        ]),
        //用于将原始数据转换成record实例
        reader : new Ext.data.ArrayReader({
               fields : [  
               {name : 'name',type : 'string'},    
               {name : 'age',type : 'int'}   
              ]  
       }) 
    });
    store.load();
    
    		
  •  

    四、Ext.data.ArrayStore实例

  •  
  • JScript 代码   复制
  • 
    var store = new Ext.data.ArrayStore({
        fields: ['name','age'],
        data: [
            ['tom',18],
             ['cat',20]
        ]
    });
    
    		
  •  

    五、Ext.data.SimpleStore实例

    SimpleStore=Store+MemoryProxy+ArrayReader

    SimpleStore是不需要写load()方法

  •  
  • JScript 代码   复制
  • 
    var store = new Ext.data.SimpleStore({
        data : [
            ['tom',18],
            ['cat',25]
        ],
        fields : [
            {name : 'name',type : 'string'},
            {name : 'age',type : 'int'}
        ]
    });
    
    		
  •  

    六、Ext.data.JsonStore实例

    JsonStore=Store+HttpProxy+JsonReader

    JsonStore需要写load()方法

  •  
  • JScript 代码   复制
  • 
    var store = new Ext.data.JsonStore({
        url : 'list。ashx',
        root : 'root',
        fields : [
            {name : 'name',type : 'string'},
            {name : 'age',type : 'int'}
        ]
    });
    store.load();
    
    		
  • 其中从 list。ashx获取的数据如:

    [{'id':1,'name':'小王','sex':'男'},    {'id':2,'name':'小李','sex':'男'},    {'id':3,'name':'小兰','sex':'女'} ]; 
     

     

    七、Ext.data.GroupingStore对数据分组

  •  
  • 
    store.groupBy('sex');//重新对sex进行分组
    store.clearGrouping();//清除分组
    
    		
  •  

    如果使用GroupingStore就要给grid设置view配置项

  •  
  • JScript 代码   复制
  • 
    view: new Ext.grid.GroupingView({
        enableGroupingMenu:false,
        groupByText:'分组',
        showGroupsText:'显示',
        hideGroupedColumn:true,
           forceFit:true,
           groupTextTpl: '{text} ({[values.rs.length]}条数据)'
    }),
    
    		
  •  

    分组本地数据

  •  
  • JScript 代码   复制
  • 
    var store = new Ext.data.GroupingStore({
         data : [
             ['tom',18,''],
             ['cat',25,''],
             ['team',18,''],
             ['jock',26,'']
        ],
         reader : new Ext.data.ArrayReader({
             fields : [
                 {name : 'name',type : 'string'},
                 {name : 'age',type : 'int'},
                 {name : 'sex',type : 'string'}
            ]
         }),
        groupField : 'age',//设置分组字段
        sortInfo : {  
           field : 'age',  
           direction : 'desc'  
           }
    });
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐