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

extJs 2.1学习笔记(Ext.data.Store篇)

阅读更多
 Ext.data.Store,这个东西是JavaScript版的DataTable啊。貌似其他Ajax框架都没有这个玩意啊。可见啦,Ext是真的打算把b/s开发重新变成c/s开发啊。哈哈哈。便宜我等了。待某细研之。

  Store类提供对记录集(Record)的包装,通过前面的研究可知,DataProxy取数据(url或数组或xml或json),DataReader用于从不规范的数据取出并格式化指定结构的记录集。记录的结构由Record.create创建。

  DataProxy通过对Connection的调用取得数据(Response)后,在回调中调用DataReader的read函数,从而把response中的数据解析成记录集,这个记录集将再以回调参数的形式传出来,store实现这个回调,并把里面的Recodrd[]取出来,放到 data这个成员中。store.data是一个MixedCollection对象,MixedCollection作什么用的前面也讲过,它本质就是一个容器,ExtJs确实很好,连容器类都写了。

  有了store.data,数据进了这儿,就好办了,store调用MixedCollection的功能,实现了一些通用的函数,如取指定成员、查询、遍历、事务等等,这些都不足道。什么提交修改、取消修改的功能却是根源于Record。Record类自身就封装了这个功能,Store中只是再次封装罢了,这个原理也很简单。看代码即知。

  上面讲的是通用原理,是大概,下面拣紧要的代码说一下。

  它定义了构造函数,继承自Ext.Observable。第一行代码就是个重点:

  this.data = new Ext.util.MixedCollection(false);

  这是定义data,所有记录都将保存在它里面。

    this.baseParams = {};
    // private
    this.paramNames = {
        "start" : "start",
        "limit" : "limit",
        "sort" : "sort",
        "dir" : "dir"
    };

  baseParams将在调用HttpProxy时用到,它将作为params附加到url末尾。这个东西没有悬念。至于 paramsNames用于保存参数名,start、limit应当用于分页,sort、dir用于排序,不过,我看了通篇的代码,发现,Store本身不提供任何其他分页、排序功能的实现,还是得依靠服务器端的。只不过,这儿提供一种统一的方式罢了。

    if(config && config.data){
        this.inlineData = config.data;
        delete config.data;
    }
  意思是说,如果创建store时,设了config,且config.data存在,那么,将直接从config.data中loadData。构造函数后面一点就有。inlineData这个属性没活多久就被delete了。

    if(this.url && !this.proxy){
        this.proxy = new Ext.data.HttpProxy({url: this.url});
    }

    if(this.reader){ // reader passed
        if(!this.recordType){
            this.recordType = this.reader.recordType;
        }
        if(this.reader.onMetaChange){
            this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
        }
    }

    if(this.recordType){
        this.fields = this.recordType.prototype.fields;
    }

  就是根据config中的情况,创建成员:proxy,reader,recordType,onMetaChange。这了这四个,就好方便在下面定义的load中加载数据并完全记录集的封装。说出来一文不值。

  this.modified = [];

  这个东西用于保存那些有修改过的记录的旧值。之所以能取消修改,正是源于此啊。

  关于addEvents那个语句,就没必要讲了,大伙都懂。

    if(this.proxy){
        this.relayEvents(this.proxy, ["loadexception"]);
    }

    this.sortToggle = {};
 if(this.sortInfo){
  this.setDefaultSort(this.sortInfo.field, this.sortInfo.direction);
 }

    Ext.data.Store.superclass.constructor.call(this);

    if(this.storeId || this.id){
        Ext.StoreMgr.register(this);
    }
    if(this.inlineData){
        this.loadData(this.inlineData);
        delete this.inlineData;
    }else if(this.autoLoad){
        this.load.defer(10, this, [
            typeof this.autoLoad == 'object' ?
                this.autoLoad : undefined]);
    }

  第一个语句中主要就是一个relayEvents,意为延迟事件,这个延迟不是时间延迟哦。它是将当前对像的某些事件处理函数作为另一个对象的处理函数,同者共享,事实上,它的作用就是利用另一对象的事件来触发本对象的事件,从而引发事件处理函数的执行(说得太拗口了吧)。

  那个inlineData上面讲了的,现在应验了,不多讲。从这儿可以看出,如果已从config中传过来数据,那么以直接传的数据为准,如果没有直接传数据,而是通过url,且autoLoad为true,这时就在构造函数中加载数据且完全数据的封装。

  重点代码至此讲了一半,另一半就是load、loadRecords了。
分享到:
评论

相关推荐

    extJs 2.1学习笔记

    17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二)...

    extJs+2.1学习笔记.pdf

    14. **extJs 2.0 学习笔记(Ext.data序论篇)** 这部分介绍了Ext.data模块的基础,包括DataModel、Reader和Writer,是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    ExtJs + api + 笔记 + 完整包

    例如,你可以从中学习到如何创建和配置组件,如何处理数据模型和store,以及如何使用事件监听机制来实现组件间的交互。 "24-Ext中的布局.doc"文件介绍了ExtJs中的布局管理器。在ExtJs中,布局管理器负责决定组件在...

    ExtJs学习笔记,共30讲

    6. **Ext.data.Store篇**:Store是ExtJs中的数据管理器,负责存储和管理数据集,这里可能解释了如何配置Store、加载数据、监听数据变化等。 7. **Ext.data.JsonReader篇**:JsonReader用于解析JSON格式的数据,与...

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(Ext.data序论篇)**:这部分内容是对Ext JS 2.0中`Ext.data`模块的概述,讲解了如何管理和操作数据。 - **ExtJs2.0学习笔记(Ext.Panel终结篇)**:深入探讨了`Ext.Panel`组件的各种特性和用法。...

    ext 4.0 学习笔记.doc

    5. **store.data**:ArrayStore的数据源,通常是一个二维数组,其中每个内部数组代表一行数据。 6. **fields**:ArrayStore的`fields`属性定义了列的结构,包括列名(`name`)、数据类型(`type`)和数据格式(`...

    extjs4.0学习笔记

    11. **数据源(Ext.grid.Panel)**:`store`是EXTJS中数据的容器,`columnLines`控制是否显示列分割线,`columns`定义了列的结构。`viewConfig`允许自定义网格视图的属性,如`stripeRows`用于开启斑马线效果,`...

    ExtJS使用笔记

    Ext.data.Store是ExtJS数据处理的核心组件,它负责数据的存取、缓存和更新。Ext.data.Store需要与数据代理Ext.data.DataProxy配合,后者定义了从内存或网络获取数据的方式。同时,Ext.data.DataReader负责将原始数据...

    extjs 学习笔记(三) 最基本的grid

    在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...

    Extjs学习笔记之九 数据模型(上)

    ### Extjs 学习笔记之九:数据模型(上) #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色,它不仅为开发者提供了强大的数据处理能力,还极大地简化了前端与...

    JavaScript.-Extjs基础学习笔记

    根据给定的文件信息,我们可以深入探讨两个关键的Extjs组件——Tab Panel(标签页控件)和Grid(表格控件)。这两个控件是Extjs框架中非常实用且功能丰富的部分,广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...

    Extjs4 MVC开发笔记源码

    在ExtJS 4中,`Ext.data.Model`是数据模型的基础。开发者可以定义模型类,包含字段(fields)和验证规则。模型类通常与服务器端的API接口对应,通过Store进行数据的加载和同步。 2. 视图(View) 视图由`Ext....

Global site tag (gtag.js) - Google Analytics