`
Jellen129
  • 浏览: 62210 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Ext.data.Store

阅读更多

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是 ComboBox,都是通过它实现数据读取、类型转换、排序分页和搜索等操作的。 Ext.data.Store中有一个Ext.data.Record数组,所有数据都存放在这些Ext.data. Record实例中,为后面的读取和修改操作做准备。

 

--1 基本应用---------------
在使用之前,首先要创建一个Ext.data.Store的实例,如下面的代码所示。
var data = [
   ['boy', 0],
   ['girl', 1]
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();

每个store最少需要两个组件的支持,分别是proxy和reader,proxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader,将data数组中的
数据转换成对应的几个PersonRecord实例,然后放入store中。store创建完毕之后,执行store.load()实现这个转换过程。经过转换之后,store里的数据就可以提供给Grid或ComboBox使用了,这就是Ext.data.Store的最基本用法。

 

--2 对数据进行排序--------------
Ext.data.Store提供了一系列属性和函数,利用它们对数据进行排序操作。可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式,如下面的代码所示:
var store = new Ext.data.Store({
       proxy: new Ext.data.MemoryProxy(data),
       reader: new Ext.data.ArrayReader({}, PersonRecord),
       sortInfo: {field: 'name', direction: 'DESC'}
});
   这样,在store加载数据之后,就会自动根据name字段进行降序排列。对store使用store.setDefaultSort('name','DESC');也会达到同样效果。

    也可以在任何时候调用sort()函数,比如store.sort('name', 'DESC');,对store中的数据进行排序。

    如果我们希望获得store的排序信息,可以调用getSortState()函数,返回的是类似{field: "name", direction: " DESC"}的JSON对象。

    与排序相关的参数还有remoteSort,这个参数是用来实现后台排序功能的。

当设置为remoteSort:true时,store会在向后台请求数据时自动加入sort和dir两个参数,分别对应排序的字段和排序的方式,由后台获取并处理这两个参数,在后台对所需数据进行排序操作。
remoteSort:true也会导致每次执行sort()时都要去后台重新加载数据,而不能只对本地数据进行排序。 

 

--3 从store 中获取数据-------------------
从store中获取数据有很多种途径,可以依据不同的要求选择不同的函数。最直接的方法是根据record在store中的行号获得对应的record,得到了record就可以使用get()函数获得里面的数据了,如下面的代码所示:
store.getAt(0).get('name')

 


通过这种方式,我们可以遍历store中所有的record,依次得到它们的数据,如下面的代码所示:
for (var i = 0; i < store.getCount(); i++) {
         var record = store.getAt(i);
         alert(record.get('name'));
}

Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录。

   除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示:
store.each(function(record) {
        alert(record.get('name'));
});

   Each()可以接受一个函数作为参数,遍历内部record,并将每个record作为参数传递给function()处理。如果希望停止遍历,可以让function()返回false。

也可以使用getRange()函数连续获得多个record,只需要指定开始和结束位置的索引值,如下面的代码所示:
var records = store.getRange(0, 1);
for (var i = 0; i < records.length; i++) {
         var record = records[i];
         alert(record.get('name'));
}

如果确实不知道record的id,也可以根据record本身的id从store中获得对应的record,如下面的代码所:

store.getById(1001).get('name')

 


EXT还提供了函数find()和findBy(),可以利用它们对store中的数据进行搜索,如下面的代码所示:
find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],

[Boolean caseSensitive] )

 


在这5个参数中,只有前两个是必须的。第一个参数property代表搜索的字段名;第二个参数value是匹配用字符串或正则表达式;第三个参数startIndex表示从第几行开始搜索,第四个参数anyMatch为true时,不必从头开始匹配;第五个参数caseSensitive为true时,会区分大小写。


如下面的代码所示:
var index = store.find('name','g');
alert(store.getAt(index).get('name'));

 


与find()函数对应的findBy()函数的定义格式如下:
findBy( Function fn, [Object scope], [Number startIndex] ) : Number


findBy()函数允许用户使用自定义函数对内部数据进行搜索。fn返回true时,表示查找成功,于是停止遍历并返回行号。fn返回false时,表示查找失败(即未找到),继续遍历,如下面的代码所示:
index = store.findBy(function(record, id) {
return record.get('name') == 'girl' && record.get('sex') == 1;
});
alert(store.getAt(index).get('name'));

 


通过findBy()函数,我们可以同时判断record中的多个字段,在函数中实现复杂逻辑。
我们还可以使用query和queryBy函数对store中的数据进行查询。与find和findBy不同的是,query和queryBy返回的是一个MixCollection对象,里面包含了搜索得到的数据,如下面的代码所示:

alert(store.query('name', 'boy'));
alert(store.queryBy(function(record) {
     return record.get('name') == 'girl' && record.get('sex') == 1;
}));

 

--4 更新store 中的数据---------------
可以使用add(Ext.data.Record[] records)向store末尾添加一个或多个record,使用的参数可以是一个record实例,如下面的代码所示:
store.add(new PersonRecord({
     name: 'other',
     sex: 0
}));
Add()也可以添加一个record数组,如下面的代码所示:
store.add([new PersonRecord({
   name: 'other1',
   sex: 0
   }), new PersonRecord({
    name: 'other2',
    sex: 0
})]);

 

 

 

Add()函数每次都会将新数据添加到store的末尾,这就有可能破坏store原有的排序方式。如果希望根据store原来的排序方式将新数据插入到对应的位置,可以使用addSorted()函数。它会在添加新数据之后立即对store进行排序,这样就可以保证store中的数据有序地显示,如下面的代码所示:
store.addSorted(new PersonRecord({ 
  name: 'lili',
  sex: 1
}));

 

 

 


      store会根据排序信息查找这条record应该插入的索引位置,然后根据得到的索引位置插入数据,从而实现对整体进行排序。这个函数需要预先为store设置本地排序,否则会不起作用。
     

 如果希望自己指定数据插入的索引位置,可以使用insert()函数。它的第一个参数表示插入数据的索引位置,可以使用record实例或record实例的数组作为参数,插入之后,后面的数据自动后移,如下面的代码所示:
store.insert(3, new PersonRecord({
name: 'other',
sex: 0
}));
store.insert(3, [new PersonRecord({
name: 'other1',
sex: 0
}), new PersonRecord({
name: 'other2',
sex: 0
})]);

 

 

 

删除操作可以使用remove()和removeAll()函数,它们分别可以删除指定的record和清空整个store中的数据,如下面的代码所示:

 

 

store.remove(store.getAt(0));
store.removeAll();

 

 

 

store中没有专门提供修改某一行record的操作,我们需要先从store中获取一个record。对这个record内部数据的修改会直接反映到store上,如下面的代码所示:
store.getAt(0).set('name', 'xxxx');

 

 


修改record的内部数据之后有两种选择:执行rejectChanges()撤销所有修改,将修改过的record恢复到原来的状态;执行commitChanges()提交数据修改。在执行撤销和提交操作之前,可以使用getModifiedRecords()获得store中修改过的record数组。
与修改数据相关的参数是pruneModifiedRecords,如果将它设置为true,当每次执行删除或reload操作时,都会清空所有修改。这样,在每次执行删除或reload操作之后,getModifiedRecords()返回的就是一个空数组,否则仍然会得到上次修改过的record记录。

 

--5加载及显示数据-------------
store创建好后,需要调用load()函数加载数据,加载成功后才能对store中的数据进行操作。load()调用的完整过程如下面的代码所示:
store.load({
params: {start:0,limit:20},
callback: function(records, options, success){
Ext.Msg.alert('info', '加载完毕');
},
scope: store,
add: true
});

分享到:
评论

相关推荐

    Ext.data.Store的基本用法

    在创建完`Ext.data.Store`实例后,执行`store.load()`方法会触发数据转换的过程。`MemoryProxy`从内存中读取原始数据,`ArrayReader`则负责将这些数据转换为`PersonRecord`实例,最后这些实例会被存储在`store`中。...

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

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

    Ext.data.Store 读取XML属性值

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

    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的获取方法

    store.load(); ``` 然后通过`store`变量来访问和操作Store。但在使用`extend`进行类继承时,可能会将Store的定义放在一个新的组件内,例如一个ComboBox: ```javascript Leangle.form.combo.ColorComboBox = Ext....

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

    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中Ext.Panel和TreePanel 组件动态加载本地页面数据

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

    Ext.data专题

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

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

    可编辑表格Ext.grid.EditorGridPanel

    var store = new Ext.data.Store({ // ... }); // 定义列模型 var cm = new Ext.grid.ColumnModel([ {header: 'Name', width: 200, dataIndex: 'name', editor: new Ext.form.TextField()}, {header: 'Age', ...

    ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree

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

    Ext.grid.GridPanel属性祥解

    5. **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)** - 说明:使用新的数据集和列模型重新配置表格。 - 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...])...

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

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

    extjs帮助文档

    - `Ext.data.Store.remove(record)`:移除记录。 #### 三十六、Ext.data.GroupingStore类(第32页) - **概述**:Ext.data.GroupingStore类实现了分组数据存储。 - **常用方法**: - `new Ext.data.GroupingStore...

    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入门教程(超级详细)

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

    Ext4.0 动态修改ComboBox选择项(本地模式)

    调用`loadData`或`refresh`方法: ```javascript comboBox.getStore().load(); // 或 comboBox.refresh(); ``` 4. **监听事件**: 为了响应用户的选择变化,可以监听ComboBox的`select`事件: ```javascript...

Global site tag (gtag.js) - Google Analytics