[转载]EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore javascript
- 博客分类:
- EXT
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'
});
继承自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'
});
发表评论
-
itemselector-multiselect的数据过滤
2010-12-16 23:07 1834纠结了半天,重写不了方法,只好改源码了。 itemselect ... -
ExtJS DeskTop组件的学习
2010-12-12 23:02 2386网上千篇一律的 sample.js的代码解释。 //菜单里 ... -
[转载]Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理
2010-12-12 23:00 1274使用Ext.Ajax.request提交数据的代码如下(这段代 ... -
[转载]ExtJS中tabPanel的实现详解
2010-12-12 22:59 1751在做这项目有快一年了,有些体会想和大家分享分享,所以决定利用这 ... -
[转载]Ext中TreePanel控件和TabPanel控件搭配测试
2010-12-12 22:58 986在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
[转载]EXT核心API详解Ext.widgets(二十)-grid(2)
2010-12-12 22:57 1056Ext.grid.EditorGridPanel 可编辑数据表 ... -
[转载]EXT核心API详解Ext.widgets(十九)-grid(1)
2010-12-12 22:56 827Ext.grid.ColumnModel 用于定义Grid的列 ... -
[转载]EXT核心API详解Ext.Toolbar(十八)
2010-12-12 22:55 1346构造 add( Mixed arg1, Mixed arg2 ... -
[转载]EXT核心API详解Ext.menu.Menu(十七)
2010-12-12 22:55 1190Ext.menu.Menu 菜单对象 config{ ... -
[转载]EXT核心API详解Ext.widgets(十六)-form(下)
2010-12-12 22:54 881Ext.form.NumberField 继承自E ... -
[转载]EXT核心API详解Ext.widgets(十五)-form(上)
2010-12-12 22:54 832Ext.form.BasicForm 对应一个dom中的for ... -
[转载]EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton
2010-12-12 22:53 857Ext.Action action实现一个脱离了容 器的事件, ... -
[转载]EXT核心API详解Ext.data(十三)-Tree/Node
2010-12-12 22:51 911Ext.data.Tree 继承自Observab ... -
[转载]EXT核心API详解Ext.data(十一)-Store
2010-12-12 22:50 706Ext.data.Store store是一个为Ext器件提 ... -
[转载]EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader javascript
2010-12-12 22:49 833Ext.data.DataReader 纯虚类,从数据源得到 ... -
EXT核心API详解(九)-Ext.data-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy javascript
2010-12-12 22:48 1185Ext.data.DataProxy 数据代理类是一个纯虚类 ... -
[转载]EXT核心API详解(八)-Ext.dat-Connection/Ajax/Record javascript
2010-12-12 22:46 702Ext.data.Connection 访问指 ... -
[转载]EXT核心API详解(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetri
2010-12-12 22:46 724Ext.KeyNav Ext的keyNav类能为Ext.El ... -
[转载]EXT核心API详解(六)Ext.Fx
2010-12-12 22:45 697Ext.Fx类 对于我这样的 ... -
[转载]EXT核心API详解(五)Ext.EventManager/EventObject/CompositeElement/CompositeElementL
2010-12-12 22:44 751Ext.EventManager 事件管理者中的大部分方法都 ...
相关推荐
EXT核心API详解 1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 ...
35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 ...
JsonStore,SimpleStore,GroupingStore… 一个表格的基本编写过程: 1、创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header: '角色', dataIndex: 'role'}, {header: '等级', dataIn
代码如下:/** * 定义降序的groupingStore */var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : ‘ASC’, groupBy : function(field, forceRegroup, direction) { direction = direction ?...
表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 下面
var testStore = new Ext.data.GroupingStore({ proxy : new Ext.data.HttpProxy({ url : '' }), reader : new Ext.data.JsonReader({ root : 'hstamcx', totalProperty : results, field
表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 我们首先来看最简单的使用表格的代码: 代码...
groupingstore很实用的小例子。适合初学者学习。一看就明白。还有注释。