`

客户端显示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`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    var store = new Ext.data.JsonStore({ url: 'jsonDataPerson.asp', root: 'rows', fields: ['name', 'age', 'sex'] }); store.load(); grid.store = store; ``` 这里创建了一个JsonStore,指定数据来源URL和...

    Ext.data.Store 读取XML属性值

    在处理数据时,`Ext.data.Store`是一个至关重要的组件,它用于存储和管理数据,可以与各种数据源进行交互。当我们需要从XML文档中提取数据并加载到`Store`时,就涉及到`Ext.data.reader.Xml`。这篇博客文章《Ext....

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

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

    ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree

    3. **数据存储**:创建一个数据存储(Ext.data.Store),并配置其URL以连接到后端服务,用于获取或更新数据。 4. **右键菜单**:实现右键菜单(Ext.menu.Menu),定义菜单项,绑定点击事件处理函数。 5. **事件...

    java-ext.zip_ext_ext java_ext 标签_ext java_java ext

    在ExtJS中,可以使用`Ext.Ajax`或`Ext.data.Store`等组件发起HTTP请求,获取JSON数据,并在前端进行展示或处理。 具体步骤可能如下: 1. **创建ExtJS组件**:在前端,开发者会定义一个ExtJS组件,比如Grid或Tree,...

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

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

    Ext.Store的获取方法

    var store = new Ext.data.JsonStore({ // store configurations }); store.load(); ``` 然后通过`store`变量来访问和操作Store。但在使用`extend`进行类继承时,可能会将Store的定义放在一个新的组件内,例如一个...

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

    总结起来,本篇内容涵盖了ExtJS中的核心数据组件,包括Ext.data.Connection的使用、Ext.data.Record的创建与操作、Ext.data.Store的配置以及数据交互的Proxy和Reader机制。这些知识是构建基于ExtJS的异步数据驱动...

    Ext.data专题

    它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的核心组成部分。通过这些概念,开发者能够轻松地管理应用程序中的数据流。 - **Store**:负责存储数据并提供一系列API来...

    Ext.DataView 图片列表显示

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

    extjs-tree.zip_extjs tree

    var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'tree-data.json', // 这是服务器端返回树形数据的接口 reader: { type: 'json', rootProperty: 'children' // JSON数据中表示...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    store: Ext.create('Ext.data.Store', { fields: ['name', 'value'], proxy: { type: 'ajax', url: 'data.json', // 本地数据文件路径 reader: { type: 'json', rootProperty: 'items' } }, autoLoad: ...

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

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

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

    Ajax和Ext插件的使用

    var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: 'your_server_side_script.php', method: 'POST' }), reader: new Ext.data.JsonReader({ root: 'data', totalProperty: 'total', ...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    1. `store`:定义数据存储对象,可以是Ext.data.TreeStore,用于保存树形结构的数据。 2. `displayField`:指定显示在下拉框中的字段,通常是从树节点数据中提取的属性。 3. `valueField`:选择后记录的值,通常是树...

Global site tag (gtag.js) - Google Analytics