[轉載]EXT核心API詳解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore javascript

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'
    });