`
cleaneyes
  • 浏览: 343525 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext.data笔记(二)

阅读更多
现在,我们得到了PersonRecord的实例boy,如何才能得到它的属性呢?以下三种方式都
可以获得boy中name属性的数据,如下面的代码所示。
alert(boy.data.name);
alert(boy.data['name']);
alert(boy.get('name'));
set()函数会判断属性值是否发生了改变,如果改变了,就要将当前对象的dirty属性设置
为true,并将修改之前的原始值放入modified对象中,供其他函数使用。如果直接操作data中
的值,record就无法记录属性数据的修改情况。
Record的属性数据被修改后,我们可以执行如下几种操作。

 

commit()(提交):这个函数的效果是设置dirty为false,并删除modified中保存的
原始数据。
reject()(撤销):这个函数的效果是将data中已经修改了的属性值都恢复成modified
中保存的原始数据,然后设置dirty为false,并删除保存原始数据的modified对象。
getChanges()获得修改的部分:这个函数会把data中经过修改的属性和数据放在一个
JSON对象里并返回。例如上例中,getChanges()返回的结果是{name:’body name’}。
我们还可以调用isModified()判断当前record中的数据是否被修改。
Ext.data.Record还提供了用于复制record实例的函数copy()。
var copyBoy = boy.copy();
这样我们就得到了boy的一个副本,它里面包含了boy的data数据,但copy()函数不会复制
dirty和modified等额外的属性值。

 

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使用了,

 

排序

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()时都要去后台重新加载数据,而不能只对本地数据
进行排序。

 

从store 中获取数据

。最直接的方法是
根据record在store中的行号获得对应的record,得到了record就可以使用get()函数获得里
面的数据了,如下面的代码所示。
store.getAt(0).get('name');

 

遍历store里的记录

for (var i = 0; i < store.getCount(); i++) {
var record = store.getAt(i);
alert(record.get('name'));
}

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

如果希望停止遍历,可以让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从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');

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;
});

 

通过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;
}));

 

更新store 中的数据

可以使用add(Ext.data.Record[] records)向store末尾添加一个或多个record,使用
的参数可以是一个record实例

store.add([new PersonRecord({
name: 'other1',
sex: 0
}), new PersonRecord({
name: 'other2',
sex: 0
})]);

 

分享到:
评论

相关推荐

    extJs 2.1学习笔记

    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.Updater篇二 27 14. JSON序列化篇 33 15. 通信篇 35 ...

    ext 4.0 学习笔记.doc

    在本文中,我们将关注EXT 4.0中的Array Grid,这是一种基础的表格展示组件,适合用来显示和操作二维数组数据。 Array Grid的核心是`Ext.grid.Panel`,它是EXT JS中的一个核心组件,用于呈现数据表格。`Ext.grid....

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(Ext.data序论篇)**:这部分内容是对Ext JS 2.0中`Ext.data`模块的概述,讲解了如何管理和操作数据。 - **ExtJs2.0学习笔记(Ext.Panel终结篇)**:深入探讨了`Ext.Panel`组件的各种特性和用法。...

    老师整理的extjs学习笔记

    #### 二、ExtJS 的 Heart—Ext.Element **2.1 如何理解 Ext.Element** `Ext.Element` 是 ExtJS 中的一个核心类,它提供了操作 DOM 节点的方法。通过这个类,开发者可以轻松地选择元素、修改样式、添加事件监听器等...

    extJs+2.1学习笔记.pdf

    14. **extJs 2.0 学习笔记(Ext.data序论篇)** 这部分介绍了Ext.data模块的基础,包括DataModel、Reader和Writer,是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是...

    ExtJs + api + 笔记 + 完整包

    本资源包含ExtJs的API文档、笔记以及示例,帮助开发者深入理解和使用ExtJs。 首先,API文档是ExtJs开发的基础,其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考,有助于开发者...

    ExtJs学习笔记,共30讲

    9. **Ext.data.Connection篇**:讨论了Ext.Ajax或Ext.data.Connection类,用于发送Ajax请求,包括异步处理、请求头、回调函数等。 10. **Ext.Updater篇**:Updater用于更新DOM元素的内容,可能涉及到动态加载HTML、...

    ExtJS使用笔记

    同时,Ext.data.DataReader负责将原始数据转换为Store可以使用的形式,而Ext.data.DataWriter则负责将数据保存到服务器。ExtJS提供了多种DataWriter的子类,用于不同的数据保存方式。 GridPanel和EditorGridPanel是...

    ext 学习笔记

    `Ext.data.Store`是Ext JS中的核心类之一,用于管理和处理应用程序中的数据。`employeestore`的配置展示了如何创建一个数据存储,并通过`reader`解析服务器返回的JSON数据。`url:path+'/user/findByPersoList.do'`...

    EXTJS学习笔记

    ### EXTJS学习笔记 #### 一、EXTJS基础概念与命名空间管理 **EXTJS** 是一款基于JavaScript的开源框架,主要用于开发复杂的企业级Web应用。它的设计目标是提高前端开发效率并简化复杂的用户界面(UI)开发过程。在...

    Extjs复习笔记(十九)-- XML作为tree的数据源

    XMLReader是Ext.data.reader.Reader的子类,它提供了处理XML数据的专门方法和配置选项。 创建XML数据源的第一步是定义一个Model,这将定义树结构中的每个节点的属性。例如,如果我们的XML节点包含`name`和`id`属性...

    extjs学习笔记

    #### 二、Ext 组件相关知识 - **Ext.getCmp**:根据组件的 ID 获取组件实例。 - `getComponent(id)` - `id` (String):组件的 ID。 - **Ext.create**:创建一个新的组件实例。 - `create(name, args)` - `name...

    Sencha touch学习笔记一:用Sencha Cmd方式创建第一个应用

    extend: 'Ext.data.Model', fields: ['name', 'value'] }); // app/store/Items.js Ext.define('AppName.store.Items', { extend: 'Ext.data.Store', model: 'AppName.model.Item', proxy: { type: 'ajax', ...

    Ext开发过程中的自学笔记

    - 接着创建一个`Ext.data.SimpleStore`对象,指定字段名和数据。 - 最后,创建Combobox实例,设置store、mode(本地模式)、valueField和displayField等属性。 2. **使用后台数据创建Combobox**: - 定义一个`...

Global site tag (gtag.js) - Google Analytics