`
fastwind
  • 浏览: 325194 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    extjs学习资源

    - **数据存储**: `Store`用于管理数据集,而`GroupingStore`、`JsonStore`和`SimpleStore`提供了更高级的数据管理功能。 ##### 7. Ext.widgets - **组件库**: `Ext.widgets`包含了大量预定义的UI组件,如按钮、...

    extjs核心api详解.doc

    此外,还涉及到分组数据(GroupingStore)、JSON数据(JsonStore)和简单数据存储(SimpleStore)。 7. **Ext.widgets**:EXTJS的组件库是其另一大亮点。这里包含了各种用户界面元素,如按钮(Button、SplitButton...

    Ext与后台数据库交互

    `SimpleStore`是最基本的存储类,除此之外还有`GroupingStore`、`JsonStore`等更复杂的子类。它们各自提供了不同的功能以满足不同的需求。 - **重要方法**:`load`,用于从服务器加载数据。此方法可以接收一些参数...

    extjs表格、树控件

    `Store` 是 ExtJS 中用于存储数据的核心组件,支持多种类型的数据源,包括 `JsonStore`, `SimpleStore`, `GroupingStore` 等。 **`SimpleStore` 示例代码**: ```javascript var data = [ // 数据省略 ]; var ...

    Ext表格控件和树控件

    根据解析的数据类型不同,数据存储器又可以细分为 `JsonStore`、`SimpleStore` 和 `GroupingStore` 等几种类型。 下面是一个简单的示例代码: ```javascript Ext.onReady(function() { var data = [ [1, '任务...

    JavaScript的ExtJS框架中表格的编写教程

    JsonStore,SimpleStore,GroupingStore… 一个表格的基本编写过程: 1、创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header: '角色', dataIndex: 'role'}, {header: '等级', dataIn

    extjs tree 节点 链接 新窗口

    var store = new Ext.data.JsonStore({ url: 'link.ejf', totalProperty: 'results', root: 'rows', idProperty: 'id', fields: ['title', 'username', {name: 'loginTimes', type: 'int'}, {name: '...

    ExtJS 2.0 GridPanel基本表格简明教程

    根据不同的数据源类型,ExtJS提供了多种类型的Store,如JsonStore、SimpleStore、GroupingStore等。其中SimpleStore是用于处理简单数据(比如二维数组)的最基础的Store类型。 在ExtJS中创建一个基础的GridPanel...

    JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

    而数据存储器如JsonStore、SimpleStore或GroupingStore则用于存放表格数据,它们基于不同的数据源进行解析。 以下是一个简单的示例,展示了如何在GridPanel中实现单元格编辑: ```javascript { xtype: 'gridpanel...

Global site tag (gtag.js) - Google Analytics