Ext 数据模型

    EXT的数据模型是所有ajax框架中一个比较完整的模型。虽然EXT以它丰富精致的控件吸引了广大用户。但是学习EXT的控件还得从它的数据模型开始。以下就给大家分享一下我的经验。

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

• Store:最主要的对外交互接口，内部保存了一个数据集。
• Record:数据集里面的每一条记录。
• DataField: 定义了记录每个字段的schema。
• Proxy: 获取数据的代理。
• 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事件。

个人意见

1. store与外部组件的交互基本是通过观察者模式实现的。能够与外部组件解耦。
2. store把reader作为参数调用proxy的load方法，在proxy加载完数据之后要调用reader.read。让proxy感知了reader的存在，造成了reader与proxy耦合了。本来proxy可以完全不用知道reader的存在，加载完数据之后把控制权交还给store就行了。

类图 希望你能用ArgoUML重新画个 这个类图背景和总体效果太让人郁闷了。
希望能结合源码分析 ：）

支持一下，谢谢分享。

抱歉，这是我第一次画uml图。用rose画的。存下来是gif。用window的图片浏览器另存为就背景变成黑色的了。
这个结构也比较简单，我就不重画了。

补充一下。
我觉得ext tree它单独用一个treeloader而不用datastore这种普遍的机制，好像不太好。可能是历史遗留问题吧。

datastore的提交数据是：

它其实是对于本身包含的每个record调用以下方法：

然后record本身又触发了store的afterCommit：

js 代码

1. // in Store.js
2.  
3. afterCommit : function(record){  
4.        this.modified.remove(record);  
5.        this.fireEvent("update", this, record, Ext.data.Record.COMMIT);  
6.    }  

终于走到最后一步了。
大家可以看到最后其实是触发了datastore的update事件。并且类型是Ext.data.Record.COMMIT。

讲的比较好，但是是否可以把这个ext结构和事例给讲一下，方便以下我们这些初学者吗！