ExtJs针对CRUD操作而产生的Store

ExtJs针对CRUD操作而产生的Store 　　  在理解store为同服务器交互而提供的CRUD操作时，我们先分析下Store所对应下的MVC模式。          举例来讲吧，通过grid例子进行分析：首先对于数据的传递，需要通过客户端的请求，而服务器做相应的相应来获取相应的数据，这里通过json数据格式来分析，客户端也就是ExtJs主要是通过多层封装好的HttpProxy来进行数据的请求响应，底层是通过继承了Ext.data.DataProxy来实现的，这里讲述的是通过Store来搭建和后台进行通信的数据桥梁；当请求执行时，请求到的数据是原始数据，并不能直接在grid中进行显示，首先需要通过JsonReader来将原始的数据转为基于Ext.data.Record的相应数据实体类，因此在开始数据通信之前，需要定义一个Record结构来进行数据的存储转换，（PS：JsonReader是继承自Ext.Data.Reader类）而此时的Store便可以直接和Record进行交互，也就是通过store的load方法，可以将数据直接转入到grid表格中，实现数据的映射；          在Ext中，针对MVC模式，所对应的model层是怎样设计的呢？ model层通过Record来定义数据相对应实体结构，而相对应的控制层表示通过store和Reader来进行，通过Reader来数据读取和转换，store的数据加载load，实现将视图层的模型ColumnModel进行映射，来填充视图grid的外观。针对控制层，提供了不同的方法来对显示层进行控制管理，如通过RowSelectionModel可以为grid提供行选择的功能，为更方面的事件触发提供了方法调用等等            针对Store所依赖的对象，我们具体分析下：（PS：摘自Ext实战）          Ext.data.DataProxy：获取未格式化的原始数据。常用子类为HttpProxy、ArrayProxy、ScrtiptTagProxy 等。          Ext.data.DataReader：读取来自DataProxy 的结构化数据，转换为Ext.data.Record对象集合。常用子类为XmlReader、JsonReader、DwrReader、DirectReader 等。          Ext.data.DataWriter：如果“读(GET)”操作在Ext 中没有提的话，那么其他三种操作就应该归类为“写(POST/PUT)”操作了。这部分的内容，在Ext 3.0 中将由Writer来负责完成。Ext.data.DataWriter 提供了增、删、改、查的实现，让Ext.data.Store与服务端框架密切通讯。Writer 控制了Store 了自动管理Ajax 的请求，让其成为Store CRUD 操作的管道。换句话说，这个DataWriter 相对于远程CRUD 操作而言，是一个在前端的初始化部分，负责写入单个或多个Ext.data.Record 对象。          Ext.data.Record：Record 类不但封装了Record 字段信息，还封装了Store 里面所使用的Record 对象的值信息，并且方便任何透过Store(模型见图6.9)来访问Records缓存之信息的代码。          Ext.data.Field：该类封装了Ext.data.Record.create()所传入字段定义对象的信息。开发者一般不需要实例化该类。方法执行过程中创建该实例，并且在Record 构造器的原型中，Ext.data.Record.fields 属性就是该实例。          Ext.Error：异常处理开始进入了Ext 前端开发的视野。开发过程中，尤其对于经验不怎么丰富的程序员来说，准确的异常信息更能友好地帮助开发者解决问题和异常。如果系统能够提供更多这方面的信息，就相应地添置新模块。在Ext 3.0 中，我们称作Ext.Error 专门应付可知的异常(不可知异常由try...catch(e)...捕获)。通过Ext.Error可定义新的异常，程序员根据特定情况选择那一时刻实例化Ext.Error，抛出异常。例如下面是data 空间下的报错信息 ——“DataProxy 尝试执行API 动作但url/function 未定义。请检查Proxy 的url 或API 的配置。            ExtJs针对CRUD操作，也就是相对应的grid表格中的增删改查而制定了相应的store，对于Http请求状态下，我们有相应的PUT、DELETE、GET、POST四类操作，可以通过store中的HttpProxy来对应着进行操作，对于HttpProxy，是基于观察者模式对于Ext.util.Observable继承下的Ext.data.Dataproxy，能从url对象中读取数据，另外应当注意的是它还支持对数据的CRUD操作，也就是通过DataProxy的aip属性来配置这4种操作对应的url，如下所示 var proxy = new Ext.data.HttpProxy({ api: { read : 'app.php/users/read', create : 'app.php/users/create', update : 'app.php/users/update', destroy : { // <--- Supports object-syntax as well url: 'app.php/users/destroy', method: "DELETE" } } });             Ext.data.DataWriter据官网介绍，能够为create、update、destory这些行为提供从store到服务器之间的交互通信，因此针对继承来自Ext.data.DataWriter的子类Ext.data.JsonWriter能更好的实现数据的CRUD操作，完整的实例代码如下，可以细看JsonWriter中提供的方法，就包括了createRecord、destoryRecord、updateRecord来实现CRUD的操作 var writer = new Ext.data.JsonWriter({ encode: false // <--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust }); Same old JsonReader as Ext-2.x: var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]); var store = new Ext.data.Store({ proxy: proxy, reader: reader, writer: writer, autoLoad: true, autoSave: true // -- Cell-level updates. }); Initiating write-actions automatically, using the existing Ext2.0 Store/Record API: var rec = store.getAt(0); rec.set('email', 'foo@bar.com'); // <--- Immediately initiates an UPDATE action through configured proxy. store.remove(rec); // <---- Immediately initiates a DESTROY action through configured proxy. For record/batch updates, use the Store-configuration autoSave:false var store = new Ext.data.Store({ proxy: proxy, reader: reader, writer: writer, autoLoad: true, autoSave: false // -- disable cell-updates }); var urec = store.getAt(0); urec.set('email', 'foo@bar.com'); var drec = store.getAt(1); store.remove(drec); // Push the button! store.save(); 大家可以动手实践下，挺有趣的store