`

客户端显示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
参见filterBygetAt( 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.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专题

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

    Ext.DataView 图片列表显示

    store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext.PagingToolbar({ store:store, pageSize:limit, displayInfo:true, displayMsg:'本页显示第{0}条到第{...

    Ext.data.Store 读取XML属性值

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

    SenchaCmd-3.1.0.192-windows.exe

    codegen.json # Data for merging generated code during upgrade workspace/ # Workspace-specific content (see below) sencha.cfg # Workspace configuration file for Sencha Cmd plugin.xml # Workspace...

    ext 基本知识-store-proxy-reader-ext-connection-实例

    conn.request({ success: function(response) { Ext.Msg.alert('info', response.responseText);...var ds = Ext.data.JsonStore({ url: 'xxx.jsp', root: 'root', fields: ['id','name','descn'] });

    Ext3.1 21款精美主题和动态换皮肤

    data: Ext.simpledata.themes }); this.cboTheme = new Ext.form.ComboBox({ id: 'ux-startcombo-theme', store: themestore, valueField: 'File', displayField: 'Name', mode: 'local', typeAhead: true,...

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

    Ethercat-Ighmaster.txt

    kernel_source_dir='/mnt/fs_ext/imx6/linux-3.0.35' #内核源码目录 lib_modules_kernel_promt='3.0.35-2666-gbdde708' #内核版本号 host=arm-fsl-linux-gnueabi #交叉编译链前缀 注意要先编译内核,然后编译...

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

    Ext Js权威指南(.zip.001

    7.2.8 客户端代理:ext.data.proxy.client / 314 7.2.9 从变量中提取数据的代理:ext.data.proxy.memory / 314 7.2.10 使用浏览器存储的代理:ext.data.webstorageproxy、ext.data. sessionstorageproxy和ext....

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

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

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

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

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

    EXT中文开发手册

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

    Extjs exporter

    It exports all the data in the store loaded at that time. If a grid is used it uses the renderers and column configurations from it. The download is made through a button and uses datauri, so it ...

Global site tag (gtag.js) - Google Analytics