`
tianyelina
  • 浏览: 84083 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext.data.store 介紹

阅读更多
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.data.Store的基本用法

    Ext.data.Store的基本用法 Ext.data.Store的基本用法 Ext.data.Store的基本用法

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员

    Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....

    Ext.data.Store 读取XML属性值

    NULL 博文链接:https://kejiangwei.iteye.com/blog/429617

    Ext.data专题

    Ext.data 在命名空间中定义了一系列store、reader 和proxy。Grid 和ComboxBox 都是以Ext.data 为 媒介获取数据的,它包含异步加载、类型转换、分页等功能。Ext.data 默认支持Array、JSON、XML 等 数据格式,可以通过...

    Ext.DataView 图片列表显示

    this.store.reload(); }; var dataview = new Ext.DataView({ store: store, tpl : tpl, id: 'phones', itemSelector: 'li.phone', overClass : 'phone-hover', singleSelect: true, multiSelect : ...

    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 2.1学习笔记

    6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data.Connection篇二 24 12. Ext.Updater篇一 26 13. ...

    Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)

    代码如下: var Store = Ext.create(‘Ext.data.Store’, { pageSize: pageSize, model: ‘Ext.data.Model名称’, autoLoad: false, proxy: { type: ‘ajax’, url: ‘请求路径’, getMethod: function(){ return ...

    ExtJs学习笔记,共30讲

    6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data.Connection篇二 24 12. Ext.Updater篇一 26 13. ...

    EXT中文开发手册

    中文API文档 数据存储与传输 Ext.data简介 Ext.data.Connection Ext.data.Record Ext.data.Store 基本应用 对数据进行排序 从store中获取数据 更新store中的数据

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

    jsp+ext4(js部分由Ext Designer生成)

    1.Ext Designer生成的代码,如何使用;通过实例化来使用。...Ext.data.Store Ext.container.Viewport .... 希望能给初学者一点启示吧。 如果有不明白的请我QQ:243596252;时间允许我会帮助大家。。。

    Ext Js权威指南(.zip.001

    7.5.4 ext.data.store加载数据的方法 / 350 7.5.5 ext.data.treestore加载数据的方法 / 354 7.5.6 store的配置项 / 358 7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360...

    精通JS脚本之ExtJS框架.part1.rar

    13.5.4 Ext.data.ScriptTagProxy 13.6 数据读取器 13.6.1 Ext.data.DataReader 13.6.2 Ext.data.ArrayReader 13.6.3 Ext.data.JsonReader 13.6.4 Ext.data.XmlReader 13.7 Ext.ux.DWR 13.7.1 Ext.data....

    ExtJs + api + 笔记 + 完整包

    ExtJs + api + 笔记 + 完整包

    精通JS脚本之ExtJS框架.part2.rar

    13.5.4 Ext.data.ScriptTagProxy 13.6 数据读取器 13.6.1 Ext.data.DataReader 13.6.2 Ext.data.ArrayReader 13.6.3 Ext.data.JsonReader 13.6.4 Ext.data.XmlReader 13.7 Ext.ux.DWR 13.7.1 Ext.data....

Global site tag (gtag.js) - Google Analytics