`
kuru
  • 浏览: 140699 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

[转载]Ext.data-GroupingStore/JsonStore/SimpleStore

阅读更多
[转载]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