`

Ext.data专题三:Ext.data.Record

阅读更多

Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。如果把Ext.data.Store看作是一张二维表,那么它的每一行就对应一个Ext.data. Record实例。

Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。

我们使用Ext.data.Record时通常都是由create()函数开始,首先用create()函数创建一个自定义的Record类型,如下面的代码所示。

 

var PersonRecord = Ext.data.Record.create([

    {name: 'name', type: 'string'},

    {name: 'sex', type: 'int'}

]);

 

PersonRecord就是我们定义的新类型,包含字符串类型的name和整数类型的sex两个属性,然后我们使用new关键字创建PersonRecord的实例,如下面的代码所示。

 

var boy = new PersonRecord({

    name: 'boy',

    sex: 0

});

 

创建对象时,可以直接通过构造方法为对象赋予初始值,将'boy'赋值给name,0赋值给sex。

现在,我们得到了PersonRecord的实例boy,如何才能得到它的属性呢?以下三种方式都可以获得boy中name属性的数据,如下面的代码所示。

 

alert(boy.data.name);

alert(boy.data['name']);

alert(boy.get('name'));

 

这里涉及Ext.data.Record的data属性,这是定义在Ext.data.Record中的一个公共属性,用于保存当前record对象的所有数据。它是一个JSON对象,可以直接从它里面获得需要的数据。可以通过Ext.data.Record的get()函数方便地从data属性中获得指定的属性值。

如果我们需要修改boy中的数据,请不要使用以下方式直接操作data,如下面的代码所示。

 

    boy.data.name = 'boy name';

    boy.data['name'] = 'boy name';

而应该使用set()函数,如下面的代码所示。

 

    boy.set('name', 'body name');

 

set()函数会判断属性值是否发生了改变,如果改变了,就要将当前对象的dirty属性设置为true,并将修改之前的原始值放入modified对象中,供其他函数使用。如果直接操作data中的值,record就无法记录属性数据的修改情况。

Record的属性数据被修改后,我们可以执行如下几种操作。

q   commit()(提交):这个函数的效果是设置dirty为false,并删除modified中保存的原始数据。

q   reject()(撤销):这个函数的效果是将data中已经修改了的属性值都恢复成modified中保存的原始数据,然后设置dirty为false,并删除保存原始数据的modified对象。

q   getChanges()获得修改的部分:这个函数会把data中经过修改的属性和数据放在一个JSON对象里并返回。例如上例中,getChanges()返回的结果是{name:’body name’}。

q   我们还可以调用isModified()判断当前record中的数据是否被修改。

      Ext.data.Record还提供了用于复制record实例的函数copy()。

 

var copyBoy = boy.copy();

 

这样我们就得到了boy的一个副本,它里面包含了boy的data数据,但copy()函数不会复制dirty和modified等额外的属性值。

分享到:
评论

相关推荐

    Ext.data.Store的基本用法

    console.log(record.get('name')); } ``` #### 七、总结 本文详细介绍了`Ext.data.Store`的基本用法,包括创建实例、数据转换、排序操作以及如何从`store`中获取数据。通过掌握这些基本知识,开发者可以更加灵活...

    Ext.data.Store 读取XML属性值

    这篇博客文章《Ext.data.Store 读取XML属性值》可能深入探讨了如何利用`Ext.data.reader.Xml`来解析XML并填充数据存储。 XML是一种结构化数据格式,广泛用于数据交换,尤其是Web服务和API。`Ext.data.reader.Xml`是...

    Ext.DataView 图片列表显示

    var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....

    EXT核心API详解.doc

    23. **Ext.data.Record类**:数据记录模型,用于存储和操作数据。 24. **Ext.data.DataProxy类**:数据代理,抽象了数据源,包括HttpProxy、MemoryProxy等。 25. **Ext.data.HttpProxy类**:HTTP数据代理,通过...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    data: Ext.encode(record.data), // 将数据编码成字符串形式 id: record.id }, success: function() { alert(10); } }); grid.getView().refresh(); // 刷新视图 }); ``` - `store` 是 `GridPanel` 绑定...

    extjs帮助文档

    - `Ext.data.Record.set(key, value)`:设置字段值。 #### 二十七、Ext.data.DataProxy类(第24页) - **概述**:Ext.data.DataProxy类提供了一个抽象层,用于访问不同来源的数据。 - **常用方法**: - `Ext.data...

    Ext.ux.UploadDialog

    Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...

    根据输入的关键字过滤ext树节点

    return record.get('text').indexOf(keyword) !== -1; // 根据文本内容过滤 } }); ``` 5. **动画效果**:为了让过滤过程更直观,可以启用动画效果。在树面板配置中加入`animate: true`,使得节点在展开和折叠时有...

    EXT核心API详解

    25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、...

    Ext.grid.GridPanel属性祥解

    #### 三、Ext.grid.GridPanel主要方法 1. **getColumnModel()** - 说明:获取当前表格的列模型。 2. **getSelectionModel()** - 说明:获取当前表格的选择模式。 3. **getStore()** - 说明:获取当前表格的数据...

    extjs帮助文档pdf版

    - `Ext.data.Record.load(data, id)`: 加载数据到模型实例。 #### 27. Ext.data.DataProxy 类 (P.24) - **概述**:作为数据源的抽象接口。 - **常用方法**: - `Ext.data.DataProxy.load(callback, scope)`: 加载...

    Ext 中的Tree实现不同节点不同的右键菜单

    if (record.data.type === 'folder') { // 如果是文件夹节点 menu = Ext.create('Ext.menu.Menu', { items: [{ text: '打开', handler: function() { console.log('打开文件夹:', record.data.text); } }, {...

    ExtJs GridPanel双击事件获得双击的行

    var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ {name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234'}, // 更多数据... ] }); var columns = [ ...

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

    console.log('用户选择了:' + record.get('text')); }); ``` 5. **MyJsp.jsp关联**: 在提供的文件`MyJsp.jsp`中,可能包含了创建ComboBox和处理相关逻辑的代码。这个JSP页面是JavaServer Pages,它允许在HTML...

    EXT中文开发手册

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

    ExtJS入门教程(超级详细)

    25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、...

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

    三、Ext.data.StoreExt.data.Store是ExtJS中用于管理数据集的核心组件,它可以加载并存储数据,同时提供对数据的查询、排序、过滤等功能。在描述中的`var ds = Ext.data.JsonStore({url: 'xxx.jsp',root: 'root',...

    ExtJS 制作个性表格

    var myStore = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: 'ajax', url: 'data.json', reader: { type: 'json', rootProperty: 'rows' } } }); myStore.load(); ``` 5. **...

Global site tag (gtag.js) - Google Analytics