Ext.data.Store/GroupingStore/JsonStore/SimpleStore

本文深入探讨了Ext数据存储组件Store的使用方法,包括构造、配置参数、常见方法及事件,通过示例展示了如何从远程JSON/XML获取数据、本地数组创建数据集,并介绍了GroupingStore、JsonStore和SimpleStore等不同类型的Store实例。文章还涵盖了Store的基本操作如添加、删除、排序、分组等,以及如何利用Store与GridPanel等UI组件进行数据交互。

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

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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值