- 浏览: 90849 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
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了。
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了。
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2963Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1610在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1594全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1227上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2475关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2123有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1295有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1435Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 974ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1720上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1391ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1158怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1158本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1714我刚才禁不住诱惑去看 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1923上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1386activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1226原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 1008深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5084Ext架构分析(3)--Widget之 ... -
Ext 2 概述
2009-07-16 08:48 823原文链接 http://hi.baidu.com/xcl1 ...
相关推荐
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篇二)...
14. **extJs 2.0 学习笔记(Ext.data序论篇)** 这部分介绍了Ext.data模块的基础,包括DataModel、Reader和Writer,是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
例如,你可以从中学习到如何创建和配置组件,如何处理数据模型和store,以及如何使用事件监听机制来实现组件间的交互。 "24-Ext中的布局.doc"文件介绍了ExtJs中的布局管理器。在ExtJs中,布局管理器负责决定组件在...
6. **Ext.data.Store篇**:Store是ExtJs中的数据管理器,负责存储和管理数据集,这里可能解释了如何配置Store、加载数据、监听数据变化等。 7. **Ext.data.JsonReader篇**:JsonReader用于解析JSON格式的数据,与...
- **ExtJs2.0学习笔记(Ext.data序论篇)**:这部分内容是对Ext JS 2.0中`Ext.data`模块的概述,讲解了如何管理和操作数据。 - **ExtJs2.0学习笔记(Ext.Panel终结篇)**:深入探讨了`Ext.Panel`组件的各种特性和用法。...
5. **store.data**:ArrayStore的数据源,通常是一个二维数组,其中每个内部数组代表一行数据。 6. **fields**:ArrayStore的`fields`属性定义了列的结构,包括列名(`name`)、数据类型(`type`)和数据格式(`...
11. **数据源(Ext.grid.Panel)**:`store`是EXTJS中数据的容器,`columnLines`控制是否显示列分割线,`columns`定义了列的结构。`viewConfig`允许自定义网格视图的属性,如`stripeRows`用于开启斑马线效果,`...
Ext.data.Store是ExtJS数据处理的核心组件,它负责数据的存取、缓存和更新。Ext.data.Store需要与数据代理Ext.data.DataProxy配合,后者定义了从内存或网络获取数据的方式。同时,Ext.data.DataReader负责将原始数据...
在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...
### Extjs 学习笔记之九:数据模型(上) #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色,它不仅为开发者提供了强大的数据处理能力,还极大地简化了前端与...
根据给定的文件信息,我们可以深入探讨两个关键的Extjs组件——Tab Panel(标签页控件)和Grid(表格控件)。这两个控件是Extjs框架中非常实用且功能丰富的部分,广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...
在ExtJS 4中,`Ext.data.Model`是数据模型的基础。开发者可以定义模型类,包含字段(fields)和验证规则。模型类通常与服务器端的API接口对应,通过Store进行数据的加载和同步。 2. 视图(View) 视图由`Ext....