Ext.data-GroupingStore/JsonStore/SimpleStore

最新推荐文章于 2021-08-06 00:45:03 发布

fastwind2046

最新推荐文章于 2021-08-06 00:45:03 发布

阅读量120

点赞数

分类专栏： EXTJS 文章标签： EXT json

EXTJS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Ext.data.GroupingStore的使用方法，该组件继承自Ext.data.Store并新增了分组功能。文章还展示了如何利用Ext.data.JsonStore和Ext.data.SimpleStore处理JSON和数组对象作为数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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