`
thinkdeeply
  • 浏览: 8221 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Ext-Store加载流程(转)

阅读更多
EXT中所有和数据相关的类都放在Ext.data命名空间下。

    * Store:        最主要的对外交互接口,内部保存了一个数据集。
      JsonStore
      JsonReader    把代理读取的数据读入数据集。 
    * Record:       数据集里面的每一条记录。
    * DataField:    定义了记录每个字段的schema。
    * DataProxy:    获取数据的代理。
      ScriptTagProxy
      HttpProxy,
    * DataReader:   把代理读取的数据读入数据集。

Store的实现
     内部用一个Ext.util.MixedCollection(既能够作为map进行索引,又能够作为list进行索引,并且更新数据时会触发事件,并且有一些其它功能的数据结构)作为数据集存放record。store实例的data域指向这个数据集。
   通过proxy加载不同来源的数据,如http remote,memory data等等。
   由于proxy加载过来的数据是异构的,所以通过不同DataReader的实现类来读入数据成为record。

    当调用load方法时候,就会委托proxy去加载数据。
    在data数据集中数据的数据,添加,修改,删除的时候触发事件。
Store数据加载流程简介
(1)实例化一个Proxy的实现proxy。
(2)实例化一个DataReader的实现reader。
(3)实例化一个Store对象store。设置store的proxy与reader。
(4)监听store的load事件或者datachange事件。
(5)调用store.load()
(6)store.load会调用proxy的load方法来加载数据(各种DataSource)。并且把reader作为参数传入。
(7)proxy的load方法加载完数据之后,调用传入的reader的read方法,并且把数据作为参数传入。
(8)reader的read方法把异构数据读入成record数据集。
(9)proxy把reader.read方法生成的record数据集作为参数,回调store。
(10)store把数据集添加到或者替换原来的数据集。
(11)触发load事件,触发datachange事件
转自 http://canfly2010.iteye.com/blog/408930
分享到:
评论

相关推荐

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

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

    Ext数据模型Store

    Ext数据模型中的Store是EXT框架中非常核心的一个概念,它是数据管理的主要接口,负责存储和管理数据集。Store内部使用了`Ext.util.MixedCollection`数据结构,这使得它可以同时作为映射和列表来操作数据,并在数据...

    ext js学习文档

    通过以上步骤,开发者不仅能够掌握 Ext JS 的基础安装与配置流程,还能学会如何利用 Grid 控件快速搭建数据展示界面,从而迈出 Ext JS 技术栈的第一步。随着实践的深入,相信你将能挖掘出更多 Ext JS 的高级特性和...

    Ext combo 下拉框级联

    以上代码示例展示了如何在Ext JS中创建级联下拉框的基本流程。在实际应用中,可能还需要考虑其他因素,比如错误处理、数据分页、异步加载等。理解并掌握这些知识点对于构建高效、响应式的Web应用至关重要。

    Ext 操作数据库,对数据的增删改查,包括数据库,Ajax请求和store请求的设置

    总的来说,“ExtProject”是一个全面介绍Ext数据库操作和Ajax请求的实践项目,它将帮助初学者快速掌握Ext框架的核心功能,并了解前后端数据交互的基本流程。通过这个项目,你不仅可以学习到Ext的使用,还能进一步...

    extgrid 封装

    - Grid可以与数据源(如Store)绑定,动态加载和更新数据。 - 提供多种内置功能,如行编辑、行选择、行拖放等。 2. 封装的意义: - 代码封装是软件工程中的基本原则,它将复杂性隐藏在内部,对外提供简洁的接口...

    Ext Js权威指南(.zip.001

    7.5.4 ext.data.store加载数据的方法 / 350 7.5.5 ext.data.treestore加载数据的方法 / 354 7.5.6 store的配置项 / 358 7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360...

    Ext甘特图官方开发指南.doc

    - **模型层**:负责管理数据模型,包括任务模型和依赖模型,使用`Ext.ux.maximgb.tg.AdjacencyListStore`和`Ext.data.Store`类进行数据管理和操作。 - **界面显示组件**:`GanttPanel`类是主要的可视组件,用于显示...

    Ext4.1.0Doc_SUN.zip

    4. **Form处理**:EXT的表单组件支持复杂的数据输入和验证,EXT4.1增加了更多的表单元素和布局选项,如字段集、组合框、日期选择器等,同时也优化了表单的提交和处理流程。 5. **AJAX通信**:EXT4.1改进了Ajax请求...

    ext漂亮的桌面系统2.0

    EXT桌面系统2.0的开发过程中,可能涉及到的技术还包括:JSONP或CORS用于跨域数据请求,Less或Sass进行CSS预处理器的使用以提高样式管理效率,以及可能采用的任务调度工具如Grunt或Gulp来自动化构建流程。此外,为了...

    ext js javascript ext设计软件

    通过模型(Models)、store(数据存储)和代理(Proxies),EXT JS实现了数据的加载、保存和展示,极大地简化了数据操作。 EXT JS还支持Ajax和JSONP,便于与服务器进行异步通信。同时,EXT JS具有良好的可扩展性,...

    EXT JSON Sqlserver 分页 全部正常运行

    EXT JS的分页通常通过Store组件来实现,Store负责加载和管理数据,并与Grid进行绑定。分页配置包括页面大小(pageSize)、总计记录数(totalProperty)以及数据源(proxy),通常使用HTTP代理(Ext.data.HttpProxy)...

    Ext JS的table设计实例

    最后,将XML数据源绑定到store,数据加载完成后,表格会自动填充这些数据。部署到TOMCAT或其他WEB容器是为了运行后端服务,提供XML数据,实现前后端分离的架构。 在实际应用中,我们可能还需要处理分页、过滤、行...

    ExtDemo例子绝对能跑起来

    开发者可能需要解压这个文件夹,然后在本地服务器环境中运行这些文件,以便浏览器可以正确加载和执行JavaScript。 下面,我们将详细讨论ExtJS的关键知识点: 1. **组件模型**:ExtJS的核心是其组件模型,它允许...

    ext2.0.2

    当Store加载数据时,会通过Proxy获取数据,然后由Reader将数据转化为Record。在数据集发生变化时,如添加、修改或删除,都会触发相应的事件。 数据加载流程一般如下: 1. 创建Proxy实例。 2. 创建DataReader实例。 ...

    Ext4.1.1a实现的gridePanel导出Excel

    以上就是利用Ext4.1.1a的GridPanel导出数据到Excel的基本流程。实际应用中,可能还需要考虑其他因素,比如数据过滤、排序状态的保持,以及用户界面的反馈等。对于大型数据集,可能还需要优化性能,避免一次性加载...

    ext集成chart

    **集成流程** 1. **引入依赖**:首先,你需要确保已经安装了包含图表支持的ExtJS库。这通常涉及到在HTML文件中引入相关的CSS和JavaScript文件,或者通过模块化工具(如Webpack或RequireJS)来加载。 2. **创建图表...

    Ext图形报表

    一旦Store加载了数据,只需将Store绑定到Chart,图表就会自动更新以反映数据的变化。 在创建具体图表类型时,你需要定义不同的系列(series)。例如,如果你想要创建一个柱状图,可以在Chart的配置中添加一个`type:...

    EXT3.0+Struts2.0 树控件代码示例

    3. 创建TreePanel:这是EXT3.0中显示树的容器,需要配置store(数据源)、root(根节点)和其它属性。 4. 配置TreeStore:将数据源与TreePanel关联,设置加载方法和数据格式。 5. 渲染Tree:在页面上添加TreePanel...

    Ext JS 6 by Example翻译

    书中会讲解如何使用Store来管理数据,以及如何通过Model定义数据结构,最后通过Data Binding实现视图的实时更新。 **3. MVC架构** Ext JS 6 遵循MVC(Model-View-Controller)设计模式,有助于组织代码并提高可...

Global site tag (gtag.js) - Google Analytics