`
- 浏览:
165863 次
- 性别:
- 来自:
成都
-
ExtJs中关于grid和store的应用分析(二)
Store即数据存储器,主要用于提供给GridPanel,EditorGridPanel等关联数据用的。
Store由Proxy(数据源)和DataReader(数据解析器)组成。
换句话说:
第一、数据存储器需要有数据才能叫数据存储器,而这个数据就是通过数据源获得;
第二、获得数据后还需要通过数据解析器将这些数据进行解析,从而成为客户端认可的符合一定格式的数据。
通过以上两个条件,这个数据存储器才能真正的为GridPanel等服务。
现在来看一下Store是如何运作的:
看API,我们只需要关心他的4个配置选项:data、proxy、reader、url
以及他的1个方法:load
1、如果配置了data,则proxy和url无效,且不需要调用load方法来生成Record集合
2、如果没有配置data,则必须设置proxy或url,或两者都设置。此时,如果没有将autoLoad设置为true,那么需要手动进行load方法的调用。就是为了得到数组、Json或Xml格式的数据。
3、reader是必须的,用以指定数据解析器,需要根据获得的数据格式指定相应类型的解析器。
4、如果没有指定proxy,但指定了url,则会默认用HttpProxy作为数据源,并将url作为HttpProxy实例化时的参数。
5、如果data封装的是数组格式的数据,则用ArrayReader作为解析器,也就是需要在Store实例化时,做如下的配置:
Js代码
1.reader:new Ext.data.ArrayReader({...});
reader:new Ext.data.ArrayReader({...});
6、如果data封装的是json格式的数据,则用JsonReader作为解析器,也就是需要在Stroe实例化时,做如下的配置:
Js代码
1.reader:new Ext.data.JsonReader({...});
reader:new Ext.data.JsonReader({...});
7、如果data封装的是xml格式的数据,则用XmlReader作为解析器,也就是需要在Store实例化时,做如下的配置:
Js代码
1.reader:new Ext.data.XmlReader({...});
reader:new Ext.data.XmlReader({...});
通过以上5、6这两个解析器的特点,Store衍生了2个子类,分别是SimpleStore和JsonStore。
SimpleStore的内部使用ArrayReader解析器,即他的reader的值为ArrayReader的实例对象。
JsonStore的内部使用JsonReader解析器,即他的reader的值为JsonReader的实例对象。
对于第7条,可以如下应用:
Js代码
1.var url = "testxml.xml";
2.var store = new Ext.data.Store({
3. url:url,//指向xml文件
4. proxy:proxy,//如果有了url,可以不用配置proxy
5. reader:new Ext.data.XmlReader({...})//必须的选项
6.});
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
通过阅读和理解这些代码,你可以更好地理解和应用上述理论知识。 总结来说,ExtJS Grid的过滤操作提供了丰富的功能,使用户能够方便地筛选数据。通过掌握如何创建、应用和清除过滤器,以及如何处理过滤事件,我们...
要导出数据,我们需要先从Store中获取所有的记录。这可以通过调用`store.getData()`方法来完成,返回的是一个包含所有记录的数据对象。 2. **构建Excel文件格式**:导出的数据需要转换为Excel可识别的格式。EXTJS...
可能包含的方法如`generateColumns(data)`,用于根据数据生成列配置,以及`loadData(data)`,用于将新数据加载到Grid的Store中。 8. **性能优化** - 动态生成Grid时要注意性能,避免不必要的重绘或计算。可以使用...
Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **MVC架构**: Model-View-Controller(MVC)是一种设计模式,常用于大型应用的组织和管理。在ExtJS4...
EXTJS Grid的排序功能是基于其内部的Store对象实现的,Store中的每条记录都有一个对应的sortField和sortDir属性,用于记录当前的排序字段和排序方向。当你点击列头进行排序时,Grid会调用Store的sort方法,根据指定...
在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 "EXTJS grid导出EXCEL文件"这个主题涉及到的主要知识点包括: 1. **EXTJS Grid组件**:...
因此,你需要跟踪拖动的记录,并在放下时将这些记录添加到目标Grid的store中。这可能涉及到数据的克隆,以防止源数据与目标数据共享引用。 4. **渲染和刷新**:拖放操作完成后,Grid需要更新视图以反映新的数据状态...
根据提供的文件信息,本文将详细解析ExtJS 4中如何处理不同类型的Store及与之相关的数据操作、模型定义以及前端展示等内容。 ### ExtJS 4中的Store与数据管理 ...希望这些内容能帮助你更好地理解和应用ExtJS框架。
在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....
在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...
在实际项目中,你应该根据需求选择合适的库版本,并通过`ext.js`或`ext-dev.js`引入EXTJS的核心库,然后根据需要引入其他组件,比如ComboBox和Grid。 总结来说,EXTJS4的ComboBox可以通过自定义事件处理和组件嵌套...
在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...
本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...
- `ComboBox` 是EXTJS中的一个基础组件,它提供了文本输入框和下拉列表的功能。 - 用户可以输入文本,也可以点击下拉箭头查看预定义的选项列表。 - `ComboBox` 的数据通常通过配置 `store` 属性来设置,`store` ...
在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...
EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...
- 考虑使用`pruneRemoved`:在内存有限的情况下,这可以帮助减少Store中不再显示的数据。 以上是ExtJS Grid实现后台分页的基础步骤和关键概念。实际应用中,可能还需要处理更多的细节,如错误处理、动态加载列等。...
Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析: 1. **Grid的基本结构** - `Ext.grid.Panel`:这是Grid组件的基础类,它包含了...
ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...
在GridPanel中,我们经常需要对列进行筛选以方便用户查找和分析数据。"GridHeaderFilters"插件就是这样一个工具,它允许用户直接在列头中设置筛选条件,提高了数据操作的便利性。 这篇博客“ExtJS4.0 分享Grid...