`
thtwin
  • 浏览: 165863 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    ExtJS grid过滤操作

    通过阅读和理解这些代码,你可以更好地理解和应用上述理论知识。 总结来说,ExtJS Grid的过滤操作提供了丰富的功能,使用户能够方便地筛选数据。通过掌握如何创建、应用和清除过滤器,以及如何处理过滤事件,我们...

    extjs grid数据导出excel文件

    要导出数据,我们需要先从Store中获取所有的记录。这可以通过调用`store.getData()`方法来完成,返回的是一个包含所有记录的数据对象。 2. **构建Excel文件格式**:导出的数据需要转换为Excel可识别的格式。EXTJS...

    ExtJs动态grid的生成

    可能包含的方法如`generateColumns(data)`,用于根据数据生成列配置,以及`loadData(data)`,用于将新数据加载到Grid的Store中。 8. **性能优化** - 动态生成Grid时要注意性能,避免不必要的重绘或计算。可以使用...

    Extjs4 grid使用例子

    Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **MVC架构**: Model-View-Controller(MVC)是一种设计模式,常用于大型应用的组织和管理。在ExtJS4...

    Extjs grid 中文排序问题修正

    EXTJS Grid的排序功能是基于其内部的Store对象实现的,Store中的每条记录都有一个对应的sortField和sortDir属性,用于记录当前的排序字段和排序方向。当你点击列头进行排序时,Grid会调用Store的sort方法,根据指定...

    EXTJS grid导出EXCEL文件

    在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 "EXTJS grid导出EXCEL文件"这个主题涉及到的主要知识点包括: 1. **EXTJS Grid组件**:...

    Extjs Grid2Grid拖拽

    因此,你需要跟踪拖动的记录,并在放下时将这些记录添加到目标Grid的store中。这可能涉及到数据的克隆,以防止源数据与目标数据共享引用。 4. **渲染和刷新**:拖放操作完成后,Grid需要更新视图以反映新的数据状态...

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

    根据提供的文件信息,本文将详细解析ExtJS 4中如何处理不同类型的Store及与之相关的数据操作、模型定义以及前端展示等内容。 ### ExtJS 4中的Store与数据管理 ...希望这些内容能帮助你更好地理解和应用ExtJS框架。

    Extjs动态GRID

    在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在实际项目中,你应该根据需求选择合适的库版本,并通过`ext.js`或`ext-dev.js`引入EXTJS的核心库,然后根据需要引入其他组件,比如ComboBox和Grid。 总结来说,EXTJS4的ComboBox可以通过自定义事件处理和组件嵌套...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - `ComboBox` 是EXTJS中的一个基础组件,它提供了文本输入框和下拉列表的功能。 - 用户可以输入文本,也可以点击下拉箭头查看预定义的选项列表。 - `ComboBox` 的数据通常通过配置 `store` 属性来设置,`store` ...

    Extjs复习笔记(二十)-- tree和grid结合

    在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...

    ExtJS笔记---Grid实现后台分页

    - 考虑使用`pruneRemoved`:在内存有限的情况下,这可以帮助减少Store中不再显示的数据。 以上是ExtJS Grid实现后台分页的基础步骤和关键概念。实际应用中,可能还需要处理更多的细节,如错误处理、动态加载列等。...

    extjs grid示例代码

    Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析: 1. **Grid的基本结构** - `Ext.grid.Panel`:这是Grid组件的基础类,它包含了...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    ExtJS4.0 分享GridHeaderFilters插件

    在GridPanel中,我们经常需要对列进行筛选以方便用户查找和分析数据。"GridHeaderFilters"插件就是这样一个工具,它允许用户直接在列头中设置筛选条件,提高了数据操作的便利性。 这篇博客“ExtJS4.0 分享Grid...

Global site tag (gtag.js) - Google Analytics