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

posted @ 2008-05-23 21:17 meetrice 阅读(...) 评论(...) 编辑 收藏