Ext.data-GroupingStore/JsonStore/SimpleStore

[转载]Ext.data-GroupingStore/JsonStore/SimpleStore

Ext.data.GroupingStore
继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sortInfo信息
增加了配置属性
groupField : String//用于分组的字段
groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假
remoteGroup : Boolean//远程排序
当然也会多一个group方法
groupBy( String field, [Boolean forceRegroup] ) : void
顾名思义都是重新排序用的

下面是个简单的示例

  

var  arr = [ [ 1 ,  ' 本 ' ,  ' 拉登 ' ], [ 2 ,  ' 笨 ' ,  ' 拉登 ' ],[ 3 ,  ' 笨 ' ,  ' 拉灯 ' ] ];
     var  reader  =   new  Ext.data.ArrayReader(
    {id:  0 } ,
   [
     {name:  ' name ' , mapping:  1 } ,        
     {name:  ' occupation ' , mapping:  2 }    
    ]);
   
     var  store = new  Ext.data.GroupingStore( {
      reader:reader,
      groupField: ' name ' ,
      groupOnSort: true ,
      sortInfo: {field:  ' occupation ' , direction:  " ASC " }   // 使用GroupingStore时必须指定sortInfo信息
   } );
   store.loadData(arr);
  
    // GridPanel以后会讨论,这儿使用它是为了直观的表现GroupingStore
    var  grid  =   new  Ext.grid.GridPanel( {
    ds: store,
    columns: [
         {header:  " name " , width:  20 , sortable:  true ,dataIndex:  ' name ' } ,
         {header:  " occupation " , width:  20 ,sortable:  true , dataIndex:  ' occupation ' }
    ],
    view:  new  Ext.grid.GroupingView( {
        forceFit: true ,
        groupTextTpl:  ' {text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '
    } ),
    frame: true ,
    width:  700 ,
    height:  450 ,
    collapsible:  true ,
    animCollapse:  false ,
    title:  ' Grouping Example ' ,
    renderTo:  ' Div_GridPanel '
    } );

Ext.data.JsonStore
也是Store子类,目标是更方便的使用json对象做数据源
构造中多了fields,root,用法如下例所示

/*
这是使用远程对象,返回内容与下面本地对象的data一致
var store=new Ext.data.JsonStore({
        url:'jsoncallback.js',
        root:'rows',
        fields:['id','name','occupation']
    });
    store.load();
*/
     var  store = new  Ext.data.JsonStore( {
        data: {  ' results ' :  2 ,  ' rows ' : [
         {  ' id ' :  1 ,  ' name ' :  ' Bill ' , occupation:  ' Gardener '  } ,
         {  ' id ' :  2 ,  ' name ' :  ' Ben ' , occupation:  ' Horticulturalist '  }
        ]} ,
    autoLoad: true ,
    root: ' rows ' ,
    fields:[ ' id ' , ' name ' , ' occupation ' ]
    } )

     // 目前请先略过gridpanel,以后再说
     var  grid  =   new  Ext.grid.GridPanel( {
    ds: 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 ' }
    ],height: 350 ,
      width: 620 ,
      title: ' Array Grid ' ,
      renderTo:  ' Div_GridPanel '
    } );

Ext.data.SimpleStore
从数组对象更方便的创建Store对象,
例

var store = new  Ext.data.JsonStore( {
        data:[
           [ 1 ,  ' Bill ' ,  ' Gardener ' ], [ 2 ,  ' Ben ' ,  ' Horticulturalist ' ]
            ],
        autoLoad: true ,
        fields:[ {name:  ' name ' , mapping:  1 } , {name: ' occupation ' ,mapping: 2 } ]
    } )
    var grid  =   new  Ext.grid.GridPanel( {
    ds: store,
    columns: [
         {header:  " name " , width:  200 , sortable:  true ,dataIndex:  ' name ' } ,
         {header:  " occupation " , width:  200 ,sortable:  true , dataIndex:  ' occupation ' }
    ],height: 350 ,
      width: 620 ,
      renderTo:  ' Div_GridPanel '
    } );