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'


    });