`
hyshucom
  • 浏览: 808276 次
文章分类
社区版块
存档分类
最新评论

Ext.data.Store/GroupingStore/JsonStore/SimpleStore

 
阅读更多
Ext.data.Store
store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表
方法:不列举继承来的方法
Store( Object config )
构造,config定义为{
autoLoad : Boolean/Object, //自动载入
baseParams : Object, //只有使用httpproxy时才有意义
data : Array, //数据
proxy : Ext.data.DataProxy,//数据代理
pruneModifiedRecords : boolean,//清除修改信息
reader : Ext.data.Reader, //数据读取器
remoteSort : boolean, //远程排序?
sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象
url : String, //利用url构造HttpProxy
}
add( Ext.data.Record[] records ) : void
增加记录records 到store
addSorted( Ext.data.Record record ) : void
增加record到store并排序(仅本地排序时有用)
clearFilter( Boolean suppressEvent ) : void
清除过滤器
collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array
收集由dataIndex指定字段的惟一值
commitChanges() : void
提交Store所有的变更,会引发Update事件
filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void
设定过滤器
field:String //字段名
value:String //RegExp 如果是字符器,检查field是否以value开始,如果是正则,检查是否匹配
anyMatch:Boolean //匹配任何部分而不仅令是开始
caseSensitive:Boolean //大小写敏感?
filterBy( Function fn, [Object scope] ) : void
更强悍的过滤方法.fn接收两个参数record和id
find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
找到符合条件的第一条记录,参数同filter
findBy( Function fn, [Object scope], [Number startIndex] ) : Number
参见filterBy
getAt( Number index ) : Ext.data.Record
getById( String id ) : Ext.data.Record

依充号/id得到record对象
getCount() : void
得到记录数
getModifiedRecords() : Ext.data.Record[]
得到修改过的记录集
getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]
得到指定范围的记录集合
getSortState() : void
得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field: "fieldName", direction: "ASC|DESC"}
getTotalCount() : void
这个对于翻页信息还是很有用的
indexOf( Ext.data.Record record ) : Number
indexOfId( String id ) : Number

由记录或id得到序号
insert( Number index, Ext.data.Record[] records ) : void
在指定的位置插入记录,并引发add事件
isFiltered() : Boolean
当前设置了过滤器则返回真
load( Object options ) : void
由指定的Proxy使用指定的reader读取远程数据
options定义为
{
params :Object, //请求url需要附加的参数
callback :Function//回叫方法,接收三个参数
//r : Ext.data.Record[] //返回的record数组
//options: Options load方法传入的options
//success: Boolean //成功
scope :Object, //范围.默认是store本身
add :Boolean 追加还是更新
}
loadData( Object data, [Boolean append] ) : void
用法比load简单一点,目的是一样的,只是这次数据由本地读取
query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection
queryBy( Function fn, [Object scope] ) : MixedCollection

查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号
rejectChanges() : void
放弃所有的变更
reload( [Object options] ) : void
重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数
remove( Ext.data.Record record ) : void
移除指定记录
removeAll() : void
移除所有记录
setDefaultSort( String fieldName, [String dir] ) : void
设置默认排序规则
sort( String fieldName, [String dir] ) : void
排序
sum( String property, Number start, Number end ) : Number
对property字段由start开始到end求和
事件列表
add : ( Store this, Ext.data.Record[] records, Number index )
beforeload : ( Store this, Object options )
clear : ( Store this )
datachanged : ( Store this )
load : ( Store this, Ext.data.Record[] records, Object options )
loadexception : ()
metachange : ( Store this, Object meta. )
remove : ( Store this, Ext.data.Record record, Number index )
update : ( Store this, Ext.data.Record record, String operation )
看名字都很简单,参数也不复杂,略过

用例
//得到远程json对象
//其中jsoncallback.js内容为
//{ 'results': 2, 'rows': [
// { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
// { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
//}
//定义proxy
var proxy=new Ext.data.HttpProxy(...{url:'jsoncallback.js'});
//定义reader
var reader=new Ext.data.JsonReader(
...{
totalProperty: "results",//totalRecords属性由json.results得到
root: "rows", //构造元数据的数组由json.rows得到
id: "id" //id由json.id得到
},[
...{name: 'name', mapping: 'name'},
...{name: 'occupation'} //如果name与mapping同名,可以省略mapping
]
)
//构建Store
var store=new Ext.data.Store(...{
proxy:proxy,
reader:reader
});
//载入
store.load();

示例2
//得到远程xml文件
//其中xml文件内容为
<?xml version="1.0" encoding="utf-8" ?>
<dataset>
<results>2</results>
<row>
<id>1</id>
<name>Bill</name>
<occupation>Gardener</occupation>
</row>
<row>
<id>2</id>
<name>Ben</name>
<occupation>Horticulturalist</occupation>
</row>
</dataset>

var proxy=new Ext.data.HttpProxy(...{url:'datasource.xml'});

var reader = new Ext.data.XmlReader(...{
totalRecords: "results",
record: "row",
id: "id"
}, [
...{name: 'name', mapping: 'name'},
...{name: 'occupation'}
]);
var store=new Ext.data.Store(...{
proxy:proxy,
reader:reader
});
store.load();

示例3
//从本地数组得到
var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
{id: 0},
[
{name: 'name', mapping: 1},
{name: 'occupation', mapping: 2}
]);

var store=new Ext.data.Store({
reader:reader
});
store.loadData(arr);

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'
});
比如有如下類:
public class CountryBase
{
private int _cid;
private string _country;
private string _region;
private string _location;
private string _delflag;

public int Cid
{
get { return _cid; }
set { _cid = value; }
}

public string Country
{
get { return _country; }
set { _country = value; }
}

public string Region
{
get { return _region; }
set { _region = value; }
}

public string Location
{
get { return _location; }
set { _location = value; }
}

public string DelFlag
{
get { return _delflag; }
set { _delflag = value; }
}
}

那么
List<CurrencyBase> CurrencyBaseContainer = new List<CurrencyBase>();

//對封裝了的成员变量进行赋值
CurrencyBase CurrencyBase = new CurrencyBase();
CurrencyBase .Cid = Convert.ToInt32(**);
CurrencyBase .Curr = Convert.ToString(**);
CurrencyBase .EntyCurr = Convert.ToString(**);
CurrencyBase .ExchRate = Convert.ToDouble(**);
CurrencyBase .CYear = Convert.ToString(**);
CurrencyBase .Remark = Convert.ToString(**);
//
CurrencyBaseContainer.Add(CurrencyBase );

最后
StringBuilder jsonText = new StringBuilder(JavaScriptConvert.SerializeObject(CurrencyBaseContainer));
return jsonText.ToString();
分享到:
评论

相关推荐

    EXT核心API详解

    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 ...

    ExtJS入门教程(超级详细)

    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 ...

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

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

    ExtJs中gridpanel分组后组名排序实例代码

    代码如下:/** * 定义降序的groupingStore */var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : ‘ASC’, groupBy : function(field, forceRegroup, direction) { direction = direction ?...

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

    表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 下面

    ExtJS 2.0 GridPanel基本表格简明教程

    表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 我们首先来看最简单的使用表格的代码: 代码...

    ExtJs异步无法向外传值和赋值的完美解决办法

    1、Ext.data.Store.load();方法是异步的,下面的方式获得的reCount始终是0,因为还没等后台的方法执行完就赋值了,此时store的record还没获得值。 var testStore = new Ext.data.GroupingStore({ proxy : new Ext....

    groupingstore小例子

    groupingstore很实用的小例子。适合初学者学习。一看就明白。还有注释。

Global site tag (gtag.js) - Google Analytics