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
});
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
|