《Ext JS高级程序设计》节选： 一个结合DataWrite和RowEditor的Grid示例(1)

本示例将使用第 2 章定义的 T_Categories 表，结合 DataWrite 和 RowEditor 直接在 Grid 中实现添加、修改和删除操作。

首先创建一个“ grid.html ”的页面文件，把需要的 Ext 文件包含在文件里，还需要包含 RowEditor 的样式文件和脚本文件。

接着在 onReady 中初始化 QuickTips ，代码如下所示。

 

1. Ext.QuickTips.init();   
2. 这是 RowEditor 显示错误信息用的，必须加上。   
3. 接着定义一个 HttpProxy ，代码如下所示。   
4. var proxy = new Ext.data.HttpProxy({   
5. api: {   
6. read : 'grid.ashx?act=list',   
7. create : 'grid.ashx?act=create',   
8. update: 'grid.ashx?act=update',   
9. destroy: 'grid.ashx?act=del'   
10. }   
11. });  

在 HttpProxy 的定义中，列表、增加、编辑和删除 的提交地址都是“ gird.ashx ”，通过 act 参数来区分这 4 个操作。

接着定义一个 JsonReader ，代码如下所示。

1. var reader = new Ext.data.JsonReader({   
2. totalProperty: 'total',   
3. successProperty: 'success',   
4. idProperty:"id",   
5. root: 'rows'   
6. }, [   
7. {name: 'id'},   
8. {name: 'cid',allowBlank: false},   
9. {name: 'title', allowBlank: false},   
10. {name: 'desc'}   
11. ]); 

 

在定义中， id 字段与 cid 字段是一样的，之所以要分开定义是因为 T_Categories 表的 id 是手动输入的，不是自动产生的，而 Store 在增加记录提交数据时，如图 8-21 所示， id 字段提交是 Store 自动生成的 id ，并不是用户输入的 id ，因而后台将无法处理这些数据。所以在这里使用了两个字段，不过，这又会产生另外一个问题，这在后面会谈到。如果 id 是自动生成的，可不用这样处理，直接一个 id 就行了。

 

接着定义一个 JsonWriter ，代码如下所示。

 

1. var writer = new Ext.data.JsonWriter({   
2. encode: true,   
3. writeAllFields: true   
4. });   

在上面代码中，参数 encode 设置为 true ，则提交的数据是如图 8-21 所示的格式 ，所有数据都编码成 JSON 格式，由 rows 参数提交到服务器。注意，“ rows ”参数是 JsonReader 定义中的参数 root 的定义值，譬如，在 JsonReader 的定义中， root 的值为“ data ”，则图 8-21 中提交的数据是“ data { … } ”，而不是“ rows { … } ”。

如果 encode 设置为 false ，则提交的数据形式如图 8-22 所示，这将没有提交参数名称，而其中的“ rows ”也是 JsonReader 定义中 root 的值。

参数 writeAllFields 的作用是，当提交时，如果设置为 true ，则提交所有字段，如果为 false ，则只提交修改过的字段。

接着定义一个 Store ，代码如下所示。

 

1. var store = new Ext.data.Store({   
2. proxy: proxy,   
3. reader: reader,   
4. writer: writer,   
5. autoSave: true,   
6. autoLoad:true,   
7. listeners: {   
8. write : function(store, action, result, res, rs) {   
9. if(action==Ext.data.Api.actions.destroy){   
10. Ext.Msg.alert(" 信息 ",res["msg"]);   
11. }   
12. },   
13. exception : function(proxy, type, action, options, res, arg) {   
14. if (type === 'remote') {   
15. Ext.Msg.show({   
16. title: ' 错误 ',   
17. msg: res.message,   
18. icon: Ext.MessageBox.ERROR,   
19. buttons: Ext.Msg.OK   
20. });   
21. }else{   
22. if(action==Ext.data.Api.actions.create){   
23. var row = Ext.decode(options.params["rows"]);   
24. if(row["id"]){   
25. rec=store.getById(row["id"]);   
26. if(rec) store.remove(rec);   
27. }   
28. }   
29. var o= Ext.decode(res.responseText);   
30. if(o["msg"]){   
31. Ext.Msg.alert(" 错误 ",o["msg"]);   
32. }   
33. }   
34. }   
35. }   
36. });   

定义中， proxy 、 reader 和 writer 都是之前定义好的。参数 autoSave 的作用是数据被改变时将自动提交数据，参数 autoLoad 表示自动加载数据，在其中还监听了 write 事件和 exception 事件。 write 事件将在数据提交成功后触发，而 exception 事件则在数据提交失败后触发。在 write 事件中，当删除数据成功时，会显示服务器端返回的提示信息。在 exception 事件中，如果服务器端文件运行存在错误，则提示错误信息。如果不是，则判断是否在创建新记录时发生错误，如果是，则在 Store 中删除新增加的记录，最后显示服务器端返回的错误信息。

接着定义 RowEditor ，代码如下：

 

1. var editor = new Ext.ux.grid.RowEditor({   
2. saveText: ' 保存 ',   
3. cancelText:' 取消 ',   
4. listeners:{   
5. beforeedit:function(rowedit,index){   
6. // 如果是 update 状态不允许修改 id   
7. var rec=store.getAt(index);   
8. if(rec.data.cid){   
9. ideditor.disable();   
10. }else{   
11. ideditor.enable();   
12. }   
13. }   
14. }   
15. });