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

在定义中，需要监听 beforeedit 事件，其作用是判断当前编辑状态是增加新记录还是编辑原有记录，如果是增加新记录，则 cid 字段的输入框需要处于允许编辑状态。否则， cid 字段的输入框需要处于不允许编辑状态。因为当新增一个记录时， Sotre 记录集中的每个记录的关键字使用的是 id 的值，而不是 cid 的值，虽然在新增操作成功后，会根据服务器端返回的记录修改这个关键字，但是，当再次编辑该记录并修改其 cid 值时，并不会再更新记录集中该记录的关键字，因而当你第 3 次编辑该记录时，在服务器端将找不到该记录，从而引发错误。这就是使用两个 id 的弊端。因而，要在这里禁止在编辑原有记录时修改 cid 值。

接着定义 cid 字段的 TextField ，代码如下：

1. var ideditor=new Ext.form.TextField({   
2.                            allowBlank: false,maskRe:/[0-9]/,regex:/^(/d{3})*$/,         regexText:" 请输入正确的编号 "   
3.                    });   

定义中，参数 maskRe 限制了输入框只能输入数字。参数 regex 限制了输入的数字的个数必须为 3 的倍数，而参数 regexText 则是验证 regex 时输出的错误信息。

最后定义 GridPanel ，代码如下：

1. var grid = new Ext.grid.GridPanel({   
2.  
3.             renderTo: 'grid1',   
4.  
5.             frame: true,   
6.  
7.             title: ' 一个结合 DataWrite 和 RowEditor 的 Grid 的示例 ',   
8.  
9.             autoScroll: true,   
10.  
11.             width:600,   
12.  
13.             height: 500,   
14.  
15.             store: store,   
16.  
17.             plugins: [editor],   
18.  
19.             columns : [   
20.  
21.                                {header: " 编号 ", width: 100, sortable: true, dataIndex: 'cid',   
22.  
23.                                    editor: ideditor   
24.  
25.                                },   
26.  
27.                                {header: " 名称 ", width: 250, sortable: true, dataIndex: 'title',   
28.  
29.                                    editor: new Ext.form.TextField({   
30.  
31.                                            allowBlank: false        
32.  
33.                                    }   
34.  
35.                                )},   
36.  
37.                                {header: " 描述 ", width: 300, sortable: true, dataIndex: 'desc', editor: new Ext.form.TextField()}   
38.  
39.                                    ],   
40.  
41.             tbar: [{   
42.  
43.                 text: ' 增加 ',   
44.  
45.                 handler: function(){   
46.  
47.                                    var u = new store.recordType({   
48.  
49.                                        cid : '',   
50.  
51.                                        title: '',   
52.  
53.                                        desc : ''   
54.  
55.                                    });   
56.  
57.                                    editor.stopEditing();   
58.  
59.                                    store.insert(0, u);   
60.  
61.                                    editor.startEditing(0);   
62.  
63.                 }   
64.  
65.             }, {   
66.  
67.                 text: ' 删除 ',   
68.  
69.                 handler: function(){   
70.  
71.                                    var rec = grid.getSelectionModel().getSelected();   
72.  
73.                                    if (!rec) {   
74.  
75.                                        return false;   
76.  
77.                                    }   
78.  
79.                                    grid.store.remove(rec);   
80.  
81.                 }   
82.  
83.             }],   
84.  
85.             viewConfig: {   
86.  
87.                 forceFit: true   
88.  
89.             }   
90.  
91.         });   
92.  

在 GridPanel 中，增加按钮用来在 Store 中创建一个新记录，然后激活 RowEditor ，进入编辑状态。删除按钮则获取选择记录，并从 Store 中删除该记录。

现在要完成服务器端代码。

在 VS 2008 中，创建一个名称为“ Grid.ashx ”的一般处理程序，然后添加以下引用：

1. using Newtonsoft.Json;   
2.  
3. using Newtonsoft.Json.Linq;   
4.  
5. using ExtShop;   
6.  
7. using System.Linq;   

接着修改 proce***equest 方法，其代码如下：

1. public void Proce***equest (HttpContext context) {   
2.  
3.       string act = context.Request["act"] ?? "";   
4.  
5.       string output = "";   
6.  
7.       switch (act)   
8.  
9.       {   
10.  
11.         case "list":   
12.  
13.           output = List(context.Request);   
14.  
15.           break;   
16.  
17.         case "create":   
18.  
19.            output = Create(context.Request);   
20.  
21.           break;   
22.  
23.         case "update":   
24.  
25.           output = Update(context.Request);   
26.  
27.           break;   
28.  
29.         case "del":   
30.  
31.           output = Del(context.Request);   
32.  
33.           break;   
34.  
35.         default:   
36.  
37.           output = "{success:false,msg:' 错误的访问类型。 '}";   
38.  
39.           break;            
40.  
41.       }   
42.  
43.       context.Response.ContentType="text/javascript";   
44.  
45.       context.Response.Write(output);   
46.  
47.     }   
48.  

代码将根据提交 act 参数执行对应的方法。

首先完成 List 方法，其代码如下：

1. private string List(HttpRequest request)   
2.  
3.     {   
4.  
5.        ExtShopDataContext dc = new ExtShopDataContext();       
6.  
7.       return new JObject(   
8.  
9.         new JProperty("success", true),   
10.  
11.         new JProperty("total", dc.T_Categories.Count()),   
12.  
13.         new JProperty("msg", ""),   
14.  
15.         new JProperty("rows", new JArray(   
16.  
17.             from m in dc.T_Categories   
18.  
19.             select new JObject(   
20.  
21.               new JProperty("id", m.CategoryID),   
22.  
23.               new JProperty("cid", m.CategoryID),   
24.  
25.               new JProperty("title",m.Titel),   
26.  
27.               new JProperty("desc",m.Description)   
28.  
29.               )   
30.  
31.           ))   
32.  
33.         ).ToString();   
34.  
35.     }   
36.  

因为不考虑分页问题，所以直接使用 JSON to LINQ 输入结果就可以了，要注意的就是，需要输出 2 次 CategoryID 值。

接着完成 Create 方法，其代码如下：

1. private string Create(HttpRequest request)   
2.  
3.     {   
4.  
5.       string rows = request["rows"] ?? "";   
6.  
7.       if (rows.Length > 0)   
8.  
9.       {   
10.  
11.         JObject r = JObject.Parse(rows);   
12.  
13.         string id = (string)r["cid"] ?? "";   
14.  
15.         string title = (string)r["title"] ?? "";   
16.  
17.         string desc = (string)r["desc"] ?? "";   
18.  
19.         if (id.Length > 0 & title.Length > 0)   
20.  
21.          {   
22.  
23.           try   
24.  
25.           {   
26.  
27.             ExtShopDataContext dc = new ExtShopDataContext();   
28.  
29.             var q = dc.T_Categories.SingleOrDefault(m => m.CategoryID == id);   
30.  
31.             if (q == null)   
32.  
33.             {   
34.  
35.               T_Categories rec = new T_Categories();   
36.  
37.               rec.CategoryID = id;   
38.  
39.               rec.Titel = title;   
40.  
41.               rec.Description = desc;   
42.  
43.               dc.T_Categories.InsertOnSubmit(rec);   
44.  
45.               dc.SubmitChanges();   
46.  
47.               return new JObject(   
48.  
49.                 new JProperty("success", true),   
50.  
51.                 new JProperty("total", 0),   
52.  
53.                 new JProperty("msg", rows),   
54.  
55.                 new JProperty("rows", new JArray(   
56.  
57.                     new JObject(   
58.  
59.                         new JProperty("id", id),   
60.  
61.                          new JProperty("cid", id),   
62.  
63.                         new JProperty("title", title),   
64.  
65.                         new JProperty("desc", desc)   
66.  
67.                       )                        
68.  
69.                   ))   
70.  
71.                 ).ToString();   
72.  
73.              }   
74.  
75.             else   
76.  
77.             {   
78.  
79.               return new JObject(   
80.  
81.                 new JProperty("success", false),   
82.  
83.                 new JProperty("msg", " 编号“ "+id+" ”已存在。 ")   
84.  
85.                 ).ToString();   
86.  
87.             }   
88.  
89.           }   
90.  
91.           catch (Exception e)   
92.  
93.           {   
94.  
95.             return new JObject(   
96.  
97.               new JProperty("success", false),   
98.  
99.               new JProperty("msg", e.Message)   
100.  
101.               ).ToString();              
102.  
103.           }   
104.  
105.         }   
106.  
107.         else   
108.  
109.         {   
110.  
111.           return new JObject(   
112.  
113.              new JProperty("success", false),   
114.  
115.             new JProperty("msg", " 错误的提交数据。 ")   
116.  
117.             ).ToString();   
118.  
119.         }   
120.  
121.       }   
122.  
123.       else   
124.  
125.       {   
126.  
127.         return new JObject(   
128.  
129.           new JProperty("success", false),   
130.  
131.           new JProperty("msg"," 错误的提交数据。 ")   
132.  
133.           ).ToString();   
134.  
135.       }   
136.  
137.     }   

因为提交的参数是“ rows ”（该参数由 Store 定义的参数 root 的值决定），且值为 JSON 格式的字符串，因而最简单的方式是先将字符串转换为 JSON 对象，然后再处理。转换后将值分别保存到 id 、 title 和 desc 三个变量里。

保存成功一定要按 JsonStore 定义的格式返回数据，而且要返回新增的记录。如果是自动生成的 id ，需要获取并返回给 Store 。

接着要完成 Update 方法，代码如下：

1. private string Update(HttpRequest request)   
2.  
3.     {   
4.  
5.       string id = request["id"] ?? "";   
6.  
7.       string rows = request["rows"] ?? "";   
8.  
9.       if (rows.Length > 0)   
10.  
11.       {   
12.  
13.         JObject r = JObject.Parse(rows);   
14.  
15.         string cid = (string)r["cid"] ?? "";   
16.  
17.         string title = (string)r["title"] ?? "";   
18.  
19.         string desc = (string)r["desc"] ?? "";   
20.  
21.         if (title.Length <= 0)   
22.  
23.         {   
24.  
25.           return new JObject(   
26.  
27.             new JProperty("success", false),   
28.  
29.             new JProperty("total", 1),   
30.  
31.             new JProperty("msg", " 请输入名称。 "),   
32.  
33.             new JProperty("rows", new JArray(   
34.  
35.             new JObject(   
36.  
37.                 new JProperty("id", id),   
38.  
39.                 new JProperty("cid", id),   
40.  
41.                 new JProperty("title", title),   
42.  
43.                 new JProperty("desc", desc)   
44.  
45.               )   
46.  
47.               ))   
48.  
49.             ).ToString();   
50.  
51.         }   
52.  
53.         try   
54.  
55.         {   
56.  
57.           ExtShopDataContext dc = new ExtShopDataContext();   
58.  
59.           var q = dc.T_Categories.SingleOrDefault(m => m.CategoryID.ToLower() == id.ToLower());   
60.  
61.           if (q != null)   
62.  
63.           {   
64.  
65.             q.Titel = title;   
66.  
67.             q.Description = desc;   
68.  
69.             dc.SubmitChanges();   
70.  
71.             return new JObject(   
72.  
73.               new JProperty("success", true),   
74.  
75.               new JProperty("total", 1),   
76.  
77.               new JProperty("msg", ""),   
78.  
79.               new JProperty("rows", new JArray(   
80.  
81.               new JObject(   
82.  
83.                   new JProperty("id", id),   
84.  
85.                   new JProperty("cid", id),   
86.  
87.                   new JProperty("title", title),   
88.  
89.                    new JProperty("desc", desc)   
90.  
91.                 )   
92.  
93.                 ))   
94.  
95.               ).ToString();   
96.  
97.           }   
98.  
99.           else   
100.  
101.           {   
102.  
103.             return new JObject(   
104.  
105.               new JProperty("success", false),   
106.  
107.               new JProperty("msg", " 编号“ "+id+" ”不存在或已被删除。 "),   
108.  
109.                   new JProperty("rows", new JArray(   
110.  
111.                   new JObject(   
112.  
113.                       new JProperty("id", id),   
114.  
115.                       new JProperty("cid", id),   
116.  
117.                       new JProperty("title", title),   
118.  
119.                       new JProperty("desc", desc)   
120.  
121.                     )                                                
122.  
123.                     ))   
124.  
125.               ).ToString();   
126.  
127.           }   
128.  
129.         }   
130.  
131.         catch (Exception e)   
132.  
133.         {   
134.  
135.           return new JObject(   
136.  
137.             new JProperty("success", false),   
138.  
139.             new JProperty("msg", e.Message),   
140.  
141.                   new JProperty("rows", new JArray(   
142.  
143.                   new JObject(   
144.  
145.                       new JProperty("id", id),   
146.  
147.                       new JProperty("cid", id),   
148.  
149.                       new JProperty("title", title),   
150.  
151.                       new JProperty("desc", desc)   
152.  
153.                     )   
154.  
155.                     ))   
156.  
157.             ).ToString();              
158.  
159.         }   
160.  
161.       }   
162.  
163.       else   
164.  
165.       {   
166.  
167.         return new JObject(   
168.  
169.           new JProperty("success", false),   
170.  
171.           new JProperty("msg"," 错误的提交数据。 ")   
172.  
173.           ).ToString();   
174.  
175.       }   
176.  
177.     }   
178.  

在 Update 方法中，无论是返回错误信息还是成功信息，都要以 Store 中定义好的 JSON 格式返回，而且必须返回更新的记录，不然 Store 在确认记录时，会认为该条记录不存在而删除该记录，然后向服务器提交删除该记录的请求。关于这一点，在已存在数据的情况下进行调试时一定要小心，不然会误删数据。

在 Update 方法中还要注意，要更新记录的 id 会通过参数 id 提交，“ rows ”里提交的是更新的数据。

最后完成的是 Del 方法，其代码如下：

1. private string Del(HttpRequest request)   
2.  
3.     {   
4.  
5.       string id= request["rows"] ?? "";   
6.  
7.       try   
8.  
9.       {   
10.  
11.         idid = id.Replace("/"", "");   
12.  
13.         ExtShopDataContext dc = new ExtShopDataContext();   
14.  
15.         var q = dc.T_Categories.SingleOrDefault(m=>m.CategoryID.ToLower()==id.ToLower());   
16.  
17.         if (q != null)   
18.  
19.         {   
20.  
21.           id = q.CategoryID;   
22.  
23.           dc.T_Categories.DeleteOnSubmit(q);   
24.  
25.           dc.SubmitChanges();   
26.  
27.         }   
28.  
29.         return new JObject(   
30.  
31.           new JProperty("success", true),   
32.  
33.           new JProperty("msg", " 删除编号为“ " + id + " ”的记录成功。 ")   
34.  
35.           ).ToString();   
36.  
37.       }   
38.  
39.       catch(Exception e)   
40.  
41.       {   
42.  
43.         return new JObject(   
44.  
45.            new JProperty("success", false),   
46.  
47.           new JProperty("msg", e.Message)   
48.  
49.           ).ToString();          
50.  
51.       }   
52.  
53.     }   
54.  

在 Del 方法中，记录的 id 也是以参数“ rows ”提交的。返回的数据格式就不用 Store 定义的 JSON 格式返回了。