`

Extjs store的操作整理

ext 
阅读更多

对Extjs中store的多种操作

 

 看着挺全的,直接贴过来,没都测试过。

 

一 遍历与查找store中所有recored

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

2 除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示。

 store.each(function(record) {   

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

 });  

Each()可以接受一个函数作为参数,遍历内部record,并将每个record作为参数传递给function()处理。

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

}  

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

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

 

5 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'));  

6 与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中的多个字段,在函数中实现复杂逻辑。

7 我们还可以使用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;  

  })); 

 

8 Ext.data.Store更新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   

  })]);  

 

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

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

    store.removeAll();  

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

 

 store.getAt(0).set('name', 'xxxx');  

 11 修改record的内部数据之后有两种选择:执行rejectChanges()撤销所有修改,将修改过的record恢复到原来的状态;执行commitChanges()提交数据修改。在执行撤销和提交操作之前,可以使用 getModifiedRecords()获得store中修改过的record数组。

 12  与修改数据相关的参数是 pruneModifiedRecords,如果将它设置为true,当每次执行删除或reload操作时,都会清空所有修改。这样,在每次执行删除或 reload操作之后,getModifiedRecords()返回的就是一个空数组,否则仍然会得到上次修改过的record记录

 

13  Ext.data.Store加载及显示数据

store创建好后,需要调用load()函数加载数据,加载成功后才能对store中的数据进行操作。load()调用的完整过程如下面的代码所示。

 

  store.load({   

   params: {start:0,limit:20},   

   callback: function(records, options, success){  

Ext.Msg.alert('info', '加载完毕');   

},   

   scope: store,   

 add: true  

  });  

1. params是在store加载时发送的附加参数。

2. callback是加载完毕时执行的回调函数,它包含3个参数:records参数表示获得的数据,options表示执行load()时传递的参数,success表示是否加载成功。

3. Scope用来指定回调函数执行时的作用域。

4. Add为true时,load()得到的数据会添加在原来的store数据的末尾,否则会先清除之前的数据,再将得到的数据添加到store中。

 

一般来说,为了对store中的数据进行初始化,load()函数只需要执行一次。如果用params参数指定了需要使用的参数,以后再次执行reload()重新加载数据时,store会自动使用上次load()中包含的params参数内容。

 

如果有一些需要固定传递的参数,也可以使用baseParams参数执行,它是一个JSON对象,里面的数据会作为参数发送给后台处理,如下面的代码所示。

 

1.   store.baseParams.start = 0;   

 

2.   store.baseParams.limit = 20;  

14 为store加载数据之后,有时不需要把所有数据都显示出来,这时可以使用函数filter和filterBy对store中的数据进行过滤,只显示符合条件的部分,如下面的代码所示。

 filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void  

filter()函数的用法与之前谈到的find()相似,如下面的代码所示。

store.filter('name', 'boy');  

对应的filterBy()与findBy()类似,也可以在自定义的函数中实现各种复杂判断,如下面的代码所示。

store.filterBy(function(record) {   

return record.get('name') == 'girl' && record.get('sex') == 1;  

});  

如果想取消过滤并显示所有数据,那么可以调用clearFilter()函数,如下面的代码所示。

store.clearFilter();  

如果想知道store上是否设置了过滤器,可以通过isFiltered()函数进行判断。

15 Ext.data.Store其他功能

 

  除了上面提到的数据获取、排序、更新、显示等功能外,store还提供了其他一些功能函数。

collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array  

getTotalCount()用于在翻页时获得后台传递过来的数据总数。如果没有设置翻页,get- TotalCount()的结果与getCount()相同,都是返回当前的数据总数,如下面的代码所示。

Sum(String property, Number start, Number end):Number用于计算某一个列从start到end的总和,如下面的代码所示。

alert(store.indexOf(store.getAt(1)));   

alert(store.indexOfId(1001));  

alert(store.sum('sex'));  

 

loadData(object data, [Boolean append])从本地JavaScript变量中读取数据,append为true时,将读取的数据附加到原数据后,否则执行整体更新,如下面的代码所示。

 

store xml  array  store 的使用http://www.blogjava.net/sansan/archive/2011/04/14/348280.html

 

分享到:
评论

相关推荐

    ExtJs中Store加载(load)时候提示信息

    除了上述操作外,`store.load()`方法还支持其他参数,如`params`、`callback`、`scope`和`add`等,用于更精细地控制数据加载行为。 - **params**:可以传递自定义的请求参数,例如分页参数`start`和`limit`。 - **...

    storebar extjs通过store实现toolbar

    `Store`可以动态加载、更新和缓存数据,与`Model`(数据模型)和`Proxy`(数据源)配合工作,提供了强大的数据操作能力。 `Toolbar`则是EXTJS中用于创建顶部或底部工具栏的组件,它包含了各种按钮、下拉列表、...

    extjs动态生成model、store、panel

    extjs动态生成model、store、panel;sql拼接等多种技术难点

    extjs crud操作的例子

    在ExtJS中,CRUD操作是通过Grid Panel、Form Panels等组件实现的,这通常涉及到模型(Model)、存储(Store)和控制器(Controller)的协同工作。 本示例是关于如何在ExtJS中实现CRUD操作的一个教程。首先,我们从...

    ExtJS grid过滤操作

    本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对本地store进行筛选。 1. **Grid过滤基础** - **Filter Model**:ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器,用户可以根据需要...

    extjs4 对各类型store各种数据的读取 model 前台 等等

    根据提供的文件信息,本文将详细解析ExtJS 4中如何处理不同类型的Store及与之相关的数据操作、模型定义以及前端展示等内容。 ### ExtJS 4中的Store与数据管理 #### Store概念简介 在ExtJS 4中,Store是用于存储...

    Extjs Grid 操作大全

    根据提供的文件信息以及标题与描述,本文将详细探讨Extjs Grid的操作大全,特别是关于如何获取Grid中的各种值以及如何添加各种点击事件。 ### Extjs Grid 操作大全 #### 一、Extjs Grid简介 Extjs 是一个用...

    EXTJS4自学手册

    EXTJS4自学手册——EXT数据结构组件(store) 三、Extjs布局 EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT...

    ExtJS Store的数据访问与更新问题

    在ExtJS中,Store是一个非常重要的组件,它用于管理和存储数据。Store通常与DataModel(在例子中是PersonRecord)配合使用,以结构化的方式管理应用程序的数据。在处理数据访问和更新时,以下是一些关键知识点: 1....

    extjsDemo(store grid form mvc模式等一些demo)

    在ExtJS中,Store是用来管理数据集的,它可以是从服务器获取的JSON或XML数据,也可以是本地数据。Store负责加载、缓存和处理数据,并与视图(View)如表格进行双向绑定,当数据发生变化时,视图会自动更新。在"ext...

    Extjs4下的STOREMENU

    在ExtJS 4中,STOREMENU 是一种特定的功能,它将数据存储(Store)与菜单(Menu)相结合,提供了一种动态创建菜单项的方法,这些菜单项可以根据存储的数据进行更新。这种功能在需要根据用户权限或实时数据动态展示...

    extJs3升级extjs4方案

    可以看到,ExtJS4 需要动态类定义,这样可以访问父类和定义 store 模型。 此外,ExtJS4 也改变了 Record 的定义。例如,在 ExtJS3 中,我们可以使用以下代码来定义一个 Record: ```javascript var PostStatus = ...

    Extjs4 关于Store的一些操作(加载/回调/添加)

    在EXTJS4中,Store是数据管理的核心组件,它负责管理数据集,包括加载、更新和缓存数据。本文将详细讲解如何处理Store的加载、回调以及如何在两个Store之间添加符合条件的记录。 1. **加载与回调问题** EXTJS4的...

    extjs grid数据导出excel文件

    EXTJS是一个强大的JavaScript框架,主要用于构建富客户端应用。...这一过程涉及到了EXTJS的Store操作、SheetJS的API使用以及前端文件操作等技术。对于EXTJS开发者而言,掌握这一功能有助于提升应用的实用性和用户体验。

    整理3种类型extjs

    这些接口会返回数据或加载新的窗口,以便用户进行操作。此外,EXTJS还支持事件监听和处理,使得用户交互更加灵活。 总结来说,EXTJS的这三种类型主要涵盖了列表展示、树形结构组织和窗口管理,提供了强大的数据展示...

    Extjs4使用要点个人整理

    以下是我根据提供的文件名整理的关于ExtJS 4的关键知识点: 1. **控件属性**:在`Extjs 控件属性.doc`中,可能会涵盖ExtJS 4中的各种组件(如窗口、面板、表格等)的常用属性。这些属性用于定义组件的行为、外观和...

    EXTJS操作后返回当前操作页

    1. **数据存储(Data Store)**:`Ext.data.Store` 是EXTJS中用来管理数据的核心组件。在示例中,创建了一个新的数据存储实例`ds`,它与一个HTTP代理(`Ext.data.HttpProxy`)连接,通过POST方法向`/recursor/server...

    轻松搞定Extjs 带目录

    表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel的分页功能和扩展组件如摘要行、可展开行、分组视图等,让数据的展示更加直观和易于管理。 通过学习...

Global site tag (gtag.js) - Google Analytics