Ext.Grid之记录用户使用习惯—隐藏列

Ext.Grid的强大功能想必用过Ext的都体会到，可以隐藏列，可以拖放，可以排序等等，但是如果用户隐藏了某一些列后，下次登录时还是要看到上次隐藏后的列该怎么办呢？这就涉及到一个用户使用习惯的问题。想到记录用户习惯，当然首选使用Cookie。但是问题来了，在什么时候记录Cookie？什么事件触发后我们去写Cookie？其实最完美的当然就是在隐藏列这一事件（暂且叫它事件吧，具体的我也不太清楚Ext隐藏列的原理）触发时把剩下的列写入Cookie，但是小生才疏学浅，没有找到这个“隐藏列”事件，没法重写，只好另辟蹊径。反反复复试了Grid自带的方法比如：Close,BeforeClose,打算在用户关闭Grid的时候记录，但是没有效果，最后才找到beforedestroy这一事件，匪夷所思，关闭grid的时候不是触发beforeclose或者close,偏偏来个beforedestroy(英文就是摧毁，销毁)，难道是Ext的人的命名习惯？不解。说到这里思路就清楚了，实现原理及步骤如下：
1、在用户关闭Grid时，触发BeforeDestroy事件，判断那些列是隐藏的，写入Cookie：

Java代码

1. grid.on("beforedestroy", CloseWriteCookie, grid);   
2. // 按用户习惯，隐藏某列   
3. if (boolHasClosedGrid == false)// 首次浏览   
4. {   
5.  HiddenMyColumn(grid, varHiddenColumn);   
6.  // alert(varHiddenColumn);   
7. }   
8. // 关闭grid但未关闭浏览器   
9. else {   
10.  HiddenMyColumn(grid, varHiddenColumnColseGrid);   
11. }  

 grid.on("beforedestroy", CloseWriteCookie, grid);
 // 按用户习惯，隐藏某列
 if (boolHasClosedGrid == false)// 首次浏览
 {
  HiddenMyColumn(grid, varHiddenColumn);
  // alert(varHiddenColumn);
 }
 // 关闭grid但未关闭浏览器
 else {
  HiddenMyColumn(grid, varHiddenColumnColseGrid);
 }

Java代码

1.  1//写入CooKie事件   
2.  2  
3.  3function CloseWriteCookie(obj) {   
4.  4 var cms = obj.getColumnModel(); // 获得网格的列模型   
5.  5 var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)   
6.  6 // alert(cms.getColumnCount());   
7.  7 for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列   
8.  8  
9.  9  if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列   
10. 10   strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始   
11. 11  }   
12. 12 }   
13. 13 // 把隐藏列存到Cookie中的同时返回隐藏列的值。   
14. 14 Ext.Ajax.request({   
15. 15    timeout : 3000000,   
16. 16    url : '/ajax/SetUserColumnCookie.aspx',   
17. 17    params : "ParaCkUserColumn=Write&UserHiddenColumn="  
18. 18      + strHiddenColoumnIndex,   
19. 19    success : function(response, options) {   
20. 20     Ext.MessageBox.hide();   
21. 21     varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid   
22. 22     // alert(varHiddenColumnColseGrid);   
23. 23     boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真   
24. 24    },   
25. 25    failure : function(response, options) {   
26. 26     Ext.Msg.alert('错误', Ext.util.JSON   
27. 27         .decode(response.responseText).data.msg);   
28. 28  
29. 29    }   
30. 30   }   
31. 31  
32. 32 )   
33. 33}   
34. 34  
35. 35  

 1//写入CooKie事件
 2
 3function CloseWriteCookie(obj) {
 4 var cms = obj.getColumnModel(); // 获得网格的列模型
 5 var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
 6 // alert(cms.getColumnCount());
 7 for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列
 8
 9  if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列
10   strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始
11  }
12 }
13 // 把隐藏列存到Cookie中的同时返回隐藏列的值。
14 Ext.Ajax.request({
15    timeout : 3000000,
16    url : '/ajax/SetUserColumnCookie.aspx',
17    params : "ParaCkUserColumn=Write&UserHiddenColumn="
18      + strHiddenColoumnIndex,
19    success : function(response, options) {
20     Ext.MessageBox.hide();
21     varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid
22     // alert(varHiddenColumnColseGrid);
23     boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真
24    },
25    failure : function(response, options) {
26     Ext.Msg.alert('错误', Ext.util.JSON
27         .decode(response.responseText).data.msg);
28
29    }
30   }
31
32 )
33}
34
35

2、用户再次打开这个页面时先用Ajax读Cookie中的隐藏列，然后调用HiddenColumn函数，执行隐藏列。

Java代码

1. Ext.Ajax.request({   
2.    timeout : 3000000,   
3.    url : '/ajax/SetUserColumnCookie.aspx',   
4.    params : "ParaCkUserColumn=Read",   
5.    success : function(response, options) {   
6.     Ext.MessageBox.hide();   
7.     varHiddenColumn = response.responseText   
8.     // alert(varHiddenColumn);   
9.    },   
10.    failure : function(response, options) {   
11.     Ext.Msg.alert('错误',   
12.       Ext.util.JSON.decode(response.responseText).data.msg);   
13.   
14.    }   
15.   })   
16.   
17.  1 // 隐藏列函数   
18.  2 function HiddenMyColumn(vargrid, varColumnIndex) {   
19.  3    
20.  4     if (varColumnIndex != "") {   
21.  5         var cms = vargrid.getColumnModel(); // 获得网格的列模型   
22.  6         var strarrayUserColumn = new Array();   
23.  7         strarrayUserColumn = varColumnIndex.split(",");   
24.  8         for (var i = 0; i < strarrayUserColumn.length; i++) {   
25.  9             cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型   
26. 10         }   
27. 11     }   
28. 12 }  

Ext.Ajax.request({
   timeout : 3000000,
   url : '/ajax/SetUserColumnCookie.aspx',
   params : "ParaCkUserColumn=Read",
   success : function(response, options) {
    Ext.MessageBox.hide();
    varHiddenColumn = response.responseText
    // alert(varHiddenColumn);
   },
   failure : function(response, options) {
    Ext.Msg.alert('错误',
      Ext.util.JSON.decode(response.responseText).data.msg);

   }
  })

 1 // 隐藏列函数
 2 function HiddenMyColumn(vargrid, varColumnIndex) {
 3 
 4     if (varColumnIndex != "") {
 5         var cms = vargrid.getColumnModel(); // 获得网格的列模型
 6         var strarrayUserColumn = new Array();
 7         strarrayUserColumn = varColumnIndex.split(",");
 8         for (var i = 0; i < strarrayUserColumn.length; i++) {
 9             cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型
10         }
11     }
12 }

欢迎各位批评指正。如果有更好的实现方法，请您不吝赐教。

附上完整的JS文件吧，后台aspx,cs文件就不贴了，有需要联系我
TotalJS.js

Java代码

1. var ds;   
2. var varHiddenColumn = "";   
3. var boolHasClosedGrid = false;   
4. Ext.Ajax.request({   
5.             timeout : 3000000,   
6.             url : '/ajax/SetUserColumnCookie.aspx',   
7.             params : "ParaCkUserColumn=Read",   
8.             success : function(response, options) {   
9.                 Ext.MessageBox.hide();   
10.                 varHiddenColumn = response.responseText   
11.                 // alert(varHiddenColumn);   
12.             },   
13.             failure : function(response, options) {   
14.                 Ext.Msg.alert('错误',   
15.                         Ext.util.JSON.decode(response.responseText).data.msg);   
16.   
17.             }   
18.         })   
19. function QueryWebTraceByAll() {   
20.     var varDefaultState = "";   
21.     Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';   
22.     Ext.QuickTips.init();   
23.     // var fm = Ext.form;   
24.     var sm = new Ext.grid.CheckboxSelectionModel();   
25.     var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {   
26.                 header : '编号',   
27.                 width : 40,   
28.                 dataIndex : 'Id',   
29.                 sortable : true  
30.             }, {   
31.                 header : '域名',   
32.                 width : 100,   
33.                 dataIndex : 'HostName',   
34.                 renderer : change,   
35.                 sortable : true  
36.   
37.             }, {   
38.                 header : '流量',   
39.                 width : 50,   
40.                 dataIndex : 'PageView',   
41.                 sortable : true  
42.             }, {   
43.                 header : '测试域名',   
44.                 width : 100,   
45.                 dataIndex : 'TestHostName',   
46.                 renderer : change,   
47.                 sortable : true  
48.             }, {   
49.                 header : '服务器IP',   
50.                 width : 140,   
51.                 dataIndex : 'WebSpace',   
52.                 sortable : true  
53.             }, {   
54.                 header : '空间用户名',   
55.                 width : 100,   
56.                 dataIndex : 'WebSpaceUserName',   
57.                 sortable : true  
58.             }, {   
59.                 header : '空间名',   
60.                 width : 100,   
61.                 dataIndex : 'WebSpaceNumber',   
62.                 sortable : true  
63.             }, {   
64.                 header : "Ftp密码",   
65.                 width : 100,   
66.                 dataIndex : 'FtpPwd',   
67.                 sortable : true  
68.             },   
69.             {   
70.                 header : '备案号',   
71.                 width : 140,   
72.                 dataIndex : 'BeiAn',   
73.                 sortable : true  
74.             },// renderer:renderFoo,   
75.   
76.             {   
77.                 header : '域名服务商',   
78.                 width : 140,   
79.                 dataIndex : 'HostNameSP',   
80.                 sortable : true  
81.             },// renderer:renderFoo,   
82.   
83.             {   
84.                 header : '域名注册时间',   
85.                 width : 140,   
86.                 dataIndex : 'HostNameRegDate',   
87.                 sortable : true  
88.             },// renderer:renderFoo,   
89.   
90.             {   
91.                 header : '域名到期时间',   
92.                 width : 140,   
93.                 dataIndex : 'HostNameExpireDate',   
94.                 sortable : true  
95.             },// renderer:renderFoo,   
96.   
97.             {   
98.                 header : '类型',   
99.                 width : 50,   
100.                 dataIndex : 'WebType',   
101.                 sortable : true  
102.             }, {   
103.                 header : '主关键字',   
104.                 width : 100,   
105.                 dataIndex : 'KeyWords',   
106.                 sortable : true  
107.             }, {   
108.                 header : '副关键词',   
109.                 width : 100,   
110.                 dataIndex : 'SubKeyWords',   
111.                 sortable : true  
112.             }, {   
113.                 header : '状态',   
114.                 width : 100,   
115.                 dataIndex : 'State',   
116.                 sortable : true  
117.             }, {   
118.                 header : '分配人',   
119.                 width : 100,   
120.                 dataIndex : 'Assumer',   
121.                 sortable : true  
122.             }, {   
123.                 header : '制作人',   
124.                 width : 40,   
125.                 dataIndex : 'Producer',   
126.                 sortable : true  
127.             }, {   
128.                 header : '模板',   
129.                 width : 56,   
130.                 dataIndex : 'Template',   
131.                 sortable : true  
132.             }, {   
133.                 header : '负责人',   
134.                 width : 40,   
135.                 dataIndex : 'Maintainer',   
136.                 sortable : true  
137.             }, {   
138.                 header : '组长',   
139.                 width : 40,   
140.                 dataIndex : 'TeamLeader',   
141.                 sortable : true  
142.             }, {   
143.                 header : '维护人51la',   
144.                 width : 65,   
145.                 dataIndex : 'MaintainerStatisId',   
146.                 sortable : true  
147.             }, {   
148.                 header : '网站51la',   
149.                 width : 51,   
150.                 dataIndex : 'StatisId',   
151.                 sortable : true  
152.             }, {   
153.                 header : '密码',   
154.                 width : 45,   
155.                 dataIndex : 'MaintainerFivelaPwd',   
156.                 sortable : true  
157.             }, {   
158.                 header : '收录',   
159.                 width : 30,   
160.                 dataIndex : 'Baidu',   
161.                 sortable : true  
162.             }, {   
163.                 header : '分配时间',   
164.                 width : 100,   
165.                 dataIndex : 'ToTeamLeaderDate',   
166.                 sortable : true  
167.             }, {   
168.                 header : '制作时间',   
169.                 width : 100,   
170.                 dataIndex : 'StartDoDate',   
171.                 sortable : true  
172.             }, {   
173.                 header : '完成时间',   
174.                 width : 100,   
175.                 dataIndex : 'EndDoDate',   
176.                 sortable : true  
177.             }, {   
178.                 header : '审核时间',   
179.                 width : 100,   
180.                 dataIndex : 'CheckDate',   
181.                 sortable : true  
182.             }, {   
183.                 header : '组员评分',   
184.                 width : 100,   
185.                 dataIndex : 'Score',   
186.                 sortable : true  
187.             }, {   
188.                 header : '分配人评分',   
189.                 width : 100,   
190.                 dataIndex : 'AssumerScore',   
191.                 sortable : true  
192.             }, {   
193.                 header : '综合评分',   
194.                 width : 100,   
195.                 dataIndex : 'TotalScore',   
196.                 sortable : true  
197.             }]);   
198.   
199.     // proxy直接去读取josn数据【   
200.     ds = new Ext.data.Store({   
201.                 proxy : new Ext.data.HttpProxy({   
202.                             url : 'WebTask/WebsiteGeneral/ShowWebSiteAsZWToLeader.aspx'  
203.                         }),   
204.                 reader : new Ext.data.JsonReader({   
205.                             totalProperty : 'totalProperty',   
206.                             root : 'Head',   
207.                             successProperty : 'success'  
208.                         }, [{   
209.                                     name : 'Id',   
210.                                     mapping : 'Id',   
211.                                     type : 'int'  
212.                                 }, {   
213.                                     name : 'HostName',   
214.                                     mapping : 'HostName',   
215.                                     type : 'string'  
216.                                 }, {   
217.                                     name : 'TestHostName',   
218.                                     mapping : 'TestHostName',   
219.                                     type : 'string'  
220.                                 }, {   
221.                                     name : "FtpPwd",   
222.                                     mapping : "FtpPwd",   
223.                                     type : "string"  
224.                                 }, {   
225.                                     name : 'WebSpaceNumber',   
226.                                     mapping : 'WebSpaceNumber',   
227.                                     type : 'string'  
228.                                 }, {   
229.                                     name : 'WebSpaceUserName',   
230.                                     mapping : 'WebSpaceUserName',   
231.                                     type : 'string'  
232.                                 }, {   
233.                                     name : 'BeiAn',   
234.                                     mapping : 'BeiAn',   
235.                                     type : 'string'  
236.                                 }, {   
237.                                     name : 'State',   
238.                                     mapping : 'State',   
239.                                     type : 'string'  
240.                                 }, {   
241.                                     name : 'WebSpace',   
242.                                     mapping : 'WebSpace',   
243.                                     type : 'string'  
244.                                 }, {   
245.                                     name : 'Assumer',   
246.                                     mapping : 'Assumer',   
247.                                     type : 'string'  
248.                                 }, {   
249.                                     name : 'HostNameSP',   
250.                                     mapping : 'HostNameSP',   
251.                                     type : 'string'  
252.                                 }, {   
253.                                     name : 'HostNameRegDate',   
254.                                     mapping : 'HostNameRegDate',   
255.                                     type : 'string'  
256.                                 }, {   
257.                                     name : 'HostNameExpireDate',   
258.                                     mapping : 'HostNameExpireDate',   
259.                                     type : 'string'  
260.                                 }, {   
261.                                     name : 'MaintainerStatisId',   
262.                                     mapping : 'MaintainerStatisId',   
263.                                     type : 'string'  
264.                                 }, {   
265.                                     name : 'StatisId',   
266.                                     mapping : 'StatisId',   
267.                                     type : 'string'  
268.                                 }, {   
269.                                     name : 'MaintainerFivelaPwd',   
270.                                     mapping : 'MaintainerFivelaPwd',   
271.                                     type : 'string'  
272.                                 }, {   
273.                                     name : 'Baidu',   
274.                                     mapping : 'Baidu',   
275.                                     type : 'string'  
276.                                 }, {   
277.                                     name : 'PageView',   
278.                                     mapping : 'PageView',   
279.                                     type : 'string'  
280.                                 }, {   
281.                                     name : 'WebType',   
282.                                     mapping : 'WebType',   
283.                                     type : 'string'  
284.                                 }, {   
285.                                     name : 'KeyWords',   
286.                                     mapping : 'KeyWords',   
287.                                     type : 'string'  
288.                                 }, {   
289.                                     name : 'SubKeyWords',   
290.                                     mapping : 'SubKeyWords',   
291.                                     type : 'string'  
292.                                 }, {   
293.                                     name : 'StartTaskDate',   
294.                                     mapping : 'StartTaskDate',   
295.                                     type : 'string'  
296.                                 }, {   
297.                                     name : 'CheckDate',   
298.                                     mapping : 'CheckDate',   
299.                                     type : 'string'  
300.                                 }, {   
301.                                     name : 'StartDoDate',   
302.                                     mapping : 'StartDoDate',   
303.                                     type : 'string'  
304.                                 }, {   
305.                                     name : 'EndDoDate',   
306.                                     mapping : 'EndDoDate',   
307.                                     type : 'string'  
308.                                 }, {   
309.                                     name : 'TeamLeader',   
310.                                     mapping : 'TeamLeader',   
311.                                     type : 'string'  
312.                                 }, {   
313.                                     name : 'Maintainer',   
314.                                     mapping : 'Maintainer',   
315.                                     type : 'string'  
316.                                 }, {   
317.                                     name : 'Producer',   
318.                                     mapping : 'Producer',   
319.                                     type : 'string'  
320.                                 }, {   
321.                                     name : 'Template',   
322.                                     mapping : 'Template',   
323.                                     type : 'string'  
324.                                 }, {   
325.                                     name : 'ToTeamLeaderDate',   
326.                                     mapping : 'ToTeamLeaderDate',   
327.                                     type : 'string'  
328.                                 }, {   
329.                                     name : 'ToTeamDate',   
330.                                     mapping : 'ToTeamDate',   
331.                                     type : 'string'  
332.                                 }, {   
333.                                     name : 'Score',   
334.                                     mapping : 'Score',   
335.                                     type : 'string'  
336.                                 }, {   
337.                                     name : 'AssumerScore',   
338.                                     mapping : 'AssumerScore',   
339.                                     type : 'string'  
340.                                 }, {   
341.                                     name : 'TotalScore',   
342.                                     mapping : 'TotalScore',   
343.                                     type : 'string'  
344.                                 }]),   
345.                 remoteSort : true  
346.             });   
347.   
348.     var store = new Ext.data.Store({   
349.         proxy : new Ext.data.HttpProxy({   
350.                     url : "WebTask/WebsiteGeneral/GetEmployeeAsGroup.aspx?type=z"  
351.                 }), // 数据源   
352.         reader : new Ext.data.JsonReader({   
353.                     totalProperty : "totalPorperty",   
354.                     root : "Head",   
355.                     successProperty : 'success',   
356.                     fields : [{   
357.                                 name : 'id',   
358.                                 mapping : 'id',   
359.                                 type : 'string'  
360.                             }, {   
361.                                 name : 'username',   
362.                                 mapping : 'username',   
363.                                 type : 'string'  
364.                             }]   
365.                 })   
366.             // 如何解析   
367.     });   
368.   
369.     store.load();   
370.   
371.     var storeddl = new Ext.data.Store({   
372.         proxy : new Ext.data.HttpProxy({   
373.                     url : "WebTask/WebsiteGeneral/GetParaList.aspx?MenuId=0010"  
374.                 }), // 下拉框数据源   
375.         reader : new Ext.data.JsonReader({   
376.                     totalProperty : "totalPorperty",   
377.                     root : "Head",   
378.                     successProperty : 'success',   
379.                     fields : [{   
380.                                 name : 'ParaName',   
381.                                 mapping : 'ParaName',   
382.                                 type : 'string'  
383.                             }, {   
384.                                 name : 'ParaValue',   
385.                                 mapping : 'ParaValue',   
386.                                 type : 'string'  
387.                             }]   
388.                 })   
389.             // 如何解析   
390.         });   
391.     // 状态数据集，非数据库   
392.     var DdlState = new Ext.data.SimpleStore({   
393.                 fields : ['ParaName', 'ParaValue'],   
394.                 data : [['所有', ''], ['准备制作', '准备制作'], ['正在制作中', '正在制作中'],   
395.                         ['已制作完成', '已制作完成'], ['已审核', '已审核'],   
396.                         ['已分配给组长', '已分配给组长'], ['已分配给组员', '已分配给组员']]   
397.             });   
398.     storeddl.load();   
399.   
400.     // 网站制作状态静态数据   
401.     var liebie = new Ext.form.ComboBox({   
402.                 id : 'dropdownliststate',   
403.                 emptyText : '请选择网站制作状态',   
404.                 mode : 'local', // 数据模式,local为本地模式   
405.                 readOnly : true,   
406.                 hidden : true,   
407.                 displayField : 'ParaName',   
408.                 valueField : 'ParaValue',   
409.                 triggerAction : 'all',   
410.                 name : 'identity', // 作为form提交时传送的参数   
411.                 store : DdlState,   
412.                 listeners : {   
413.                     select : {   
414.                         fn : function(combo, record, index) {   
415.                             // 先清理数据   
416.                             ds.removeAll();   
417.                             ds.baseParams = {   
418.                                 paraname : grid.topToolbar.items.items[0].value,   
419.                                 paravalue : record.get('ParaValue')   
420.                             };   
421.   
422.                             ds.load({   
423.                                         callback : function(r, options, success) {   
424.                                             if (success == false) {   
425.                                                 // 如果没有数据就清空   
426.                                                 ds.removeAll();   
427.                                                 Ext.MessageBox.alert('提示',   
428.                                                         'Sorry,没有符合条件的数据');   
429.                                             }   
430.                                         }   
431.                                     });   
432.                             ds.reload({   
433.                                         params : {   
434.                                             start : 0,   
435.                                             limit : 20  
436.                                         }   
437.                                     });   
438.                         }   
439.                     }   
440.                 }   
441.             });   
442.   
443.     var grid = new Ext.grid.EditorGridPanel({   
444.         renderTo : 'grid3',   
445.         ds : ds,   
446.         sm : sm,   
447.         stripeRows : true,   
448.   
449.         cm : cm,   
450.         width : 700,   
451.         height : 280,   
452.   
453.         loadMask : true,   
454.         tbar : new Ext.Toolbar({   
455.             items : [new Ext.form.ComboBox({   
456.                         id : 'ComSearch',   
457.                         emptyText : '请选择搜索项目',   
458.                         mode : 'remote', // 数据模式,local为本地模式   
459.                         readOnly : true,   
460.                         displayField : 'ParaName',   
461.                         valueField : 'ParaValue',   
462.   
463.                         triggerAction : 'all',   
464.                         name : 'identity', // 作为form提交时传送的参数   
465.                         store : storeddl,   
466.                         listeners : {   
467.                             select : {   
468.                                 fn : function(combo, record, index) {   
469.                                     if (record.get('ParaValue') == 'State') {   
470.                                         liebie.show();   
471.                                         Ext.get('txtsearchword')   
472.                                                 .setDisplayed('none');   
473.                                         Ext.get('btnSearch')   
474.                                                 .setDisplayed('none');   
475.                                     } else {   
476.                                         liebie.hide();   
477.                                         Ext.get('txtsearchword')   
478.                                                 .setDisplayed('block');   
479.                                         Ext.get('btnSearch')   
480.                                                 .setDisplayed('block');   
481.                                     }   
482.                                 }   
483.                             }   
484.                         }   
485.   
486.                     }),   
487.   
488.                     // 网站状态静态数据   
489.                     liebie, new Ext.form.TextField({   
490.                         id : 'txtsearchword',   
491.                         fieldLabel : '搜索文字',   
492.                         width : 150,   
493.                         name : 'SearchWord',   
494.                         allowBlank : false,   
495.                         blankText : '请输入搜索文字',   
496.                         listeners : {   
497.                             specialKey : function(field, e) {   
498.                                 if (e.getKey() == Ext.EventObject.ENTER) {   
499.                                     ds.removeAll();   
500.                                     ds.baseParams = {   
501.                                         paraname : grid.topToolbar.items.items[0].value,   
502.                                         paravalue : Ext.get('txtsearchword').dom.value   
503.                                     };   
504.   
505.                                     ds.load({   
506.                                         callback : function(r, options, success) {   
507.                                             if (success == false) {   
508.                                                 Ext.MessageBox.alert('提示',   
509.                                                         'Sorry,没有符合条件的数据');   
510.                                             }   
511.                                         }   
512.                                     });   
513.                                     ds.reload({   
514.                                                 params : {   
515.                                                     start : 0,   
516.                                                     limit : 20  
517.                                                 }   
518.                                             });   
519.                                 }   
520.                             }   
521.                         }   
522.                     }),   
523.   
524.                     {   
525.                         id : 'btnSearch',   
526.                         text : '搜索',   
527.                         iconCls : 'search',   
528.                         handler : function() {   
529.   
530.                             ds.removeAll();   
531.   
532.                             ds.baseParams = {   
533.                                 paraname : grid.topToolbar.items.items[0].value,   
534.                                 paravalue : Ext.get('txtsearchword').dom.value   
535.                             };   
536.   
537.                             ds.load({   
538.                                         callback : function(r, options, success) {   
539.                                             if (success == false) {   
540.                                                 // 如果为空就清空原来数据   
541.   
542.                                                 Ext.MessageBox.alert('提示',   
543.                                                         'Sorry,没有符合条件的数据');   
544.                                             }   
545.                                         }   
546.                                     });   
547.                             ds.reload({   
548.                                         params : {   
549.                                             start : 0,   
550.                                             limit : 20  
551.                                         }   
552.                                     });   
553.                         }   
554.                     }]   
555.         }),   
556.   
557.         bbar : new Ext.PagingToolbar({   
558.             pageSize : 20,   
559.             store : ds,   
560.             displayInfo : true,   
561.             displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',   
562.             emptyMsg : "没有记录",   
563.             items : [{   
564.                 text : '导出Excel',   
565.                 iconCls : 'add',   
566.                 tooltip : "点击导出Excel文件",   
567.                 handler : function() {   
568.                     // 导出Excel文件   
569.                     var cms = grid.getColumnModel(); // 获得网格的列模型   
570.                     var strColoumnNames = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)   
571.                     var strColoumnNamesHeader = "";   
572.                     var strAllSql = "";   
573.                     for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列   
574.                         if (!cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列及是否列名为空（因为如果有选择框和默认序号，则为空）   
575.                             strColoumnNames = Ext.util.Format.trim(cms   
576.                                     .getDataIndex(i));// 获得列名   
577.                             // 判断是否是综合评分这列，如果是要把列名换成原始的   
578.                             strColoumnNamesHeader = escape(Ext.util.Format   
579.                                     .trim(cms.getColumnHeader(i)));// 获得列标题   
580.                             strAllSql += strColoumnNames + " as "  
581.                                     + strColoumnNamesHeader + ",";// 拼接Sql查询语句，格式   
582.                             // 字段 as   
583.                             // 中文标题   
584.                         }   
585.                     }   
586.                     // self表示在本窗口打开   
587.                     var varparaname = grid.topToolbar.items.items[0].value;   
588.                     var varparavalue = Ext.util.Format.trim(Ext   
589.                             .get('txtsearchword').dom.value);   
590.                     var varparanametext = Ext.get('ComSearch').dom.value   
591.                     var gridtoexcelwindow;   
592.                     if (typeof(varparaname) == "undefined") {   
593.                         varparaname = "State";   
594.                         varparavalue = varDefaultState;   
595.                         varparanametext = "默认首要业务数据";   
596.                     }   
597.                     gridtoexcelwindow = window   
598.                             .open(    "Ajax/GridToExcel.aspx?sql=" + strAllSql   
599.                                             + "&FromTable=WebTrace&ParaName="  
600.                                             + escape(varparaname)   
601.                                             + "&ParaNameText="  
602.                                             + escape(varparanametext)   
603.                                             + "&ParaValue="  
604.                                             + escape(varparavalue), "_self",   
605.                                     "menubar=0,scrollbar=0,resizable=0,channelmode=0,location=0,status=0");   
606.                     gridtoexcelwindow.focus();   
607.                 }   
608.             }]   
609.         })   
610.     });   
611.     // el:指定html元素用于显示grid   
612.     grid.render();// 渲染表格   
613.     //    
614.   
615.     ds.baseParams = {   
616.         paraname : 'State',   
617.         paravalue : varDefaultState   
618.     };   
619.     ds.load({   
620.                 callback : function(r, options, success) {   
621.                     if (success == false) {   
622.                         ds.removeAll();   
623.                         Ext.MessageBox.alert('提示', 'Sorry,没有符合条件的数据');   
624.                     }   
625.                 }   
626.             });   
627.     ds.reload({   
628.                 params : {   
629.                     start : 0,   
630.                     limit : 20  
631.                 }   
632.             });   
633.     var win = new Ext.Window({   
634.         layout : 'fit',   
635.         maximizable : true,   
636.         collapsible : true,   
637.         width : 1000,   
638.         height : 600,   
639.         modal : true,   
640.         title : "公共查询界面:在这里您可以查询您需要的网站并可以导出所需数据<br/><font color='#FF0000'><b>小提示：<br/>1、您可以点击任一列名右侧出现的箭头，在出现的下拉框中，隐藏某些您不需要的列。您再次进入此页面时将保持您上次保留的列。<br/>2、搜索支持回车键。<br/>3、在窗体底部有'导出Excel'按钮，你可以导出您需要的数据</b></font>",   
641.         items : grid   
642.     });   
643.     win.show();   
644.     grid.on("afteredit", afterEdit1, grid);   
645.     grid.on("beforedestroy", CloseWriteCookie, grid);   
646.   
647.     // 按用户习惯，隐藏某列   
648.     if (boolHasClosedGrid == false)// 首次浏览   
649.     {   
650.         HiddenMyColumn(grid, varHiddenColumn);   
651.         // alert(varHiddenColumn);   
652.     }   
653.     // 关闭grid但未关闭浏览器   
654.     else {   
655.         HiddenMyColumn(grid, varHiddenColumnColseGrid);   
656.     }   
657. }   
658. // 隐藏列函数   
659. function HiddenMyColumn(vargrid, varColumnIndex) {   
660.   
661.     if (varColumnIndex != "") {   
662.         var cms = vargrid.getColumnModel(); // 获得网格的列模型   
663.         var strarrayUserColumn = new Array();   
664.         strarrayUserColumn = varColumnIndex.split(",");   
665.         for (var i = 0; i < strarrayUserColumn.length; i++) {   
666.             cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型   
667.         }   
668.     }   
669. }   
670. // 关闭时写cookie   
671. function CloseWriteCookie(obj) {   
672.     var cms = obj.getColumnModel(); // 获得网格的列模型   
673.     var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)   
674.     // alert(cms.getColumnCount());   
675.     for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列   
676.   
677.         if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列   
678.             strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始   
679.         }   
680.     }   
681.     // 把隐藏列存到Cookie中的同时返回隐藏列的值。   
682.     Ext.Ajax.request({   
683.                 timeout : 3000000,   
684.                 url : '/ajax/SetUserColumnCookie.aspx',   
685.                 params : "ParaCkUserColumn=Write&UserHiddenColumn="  
686.                         + strHiddenColoumnIndex,   
687.                 success : function(response, options) {   
688.                     Ext.MessageBox.hide();   
689.                     varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid   
690.                     // alert(varHiddenColumnColseGrid);   
691.                     boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真   
692.                 },   
693.                 failure : function(response, options) {   
694.                     Ext.Msg.alert('错误', Ext.util.JSON   
695.                                     .decode(response.responseText).data.msg);   
696.   
697.                 }   
698.             }   
699.   
700.     )   
701. }   
702. // 编辑时的检验是否合法，不合法不更新   
703. function afterEdit1(obj) {   
704.     var r = obj.record;// 获取被修改的行   
705.     var l = obj.field;// 获取被修改的列   
706.     var o = obj.originalValue;   
707.     var id = r.get("Id");   
708.     var lie = r.get(l);   
709.     Ext.Ajax.request({   
710.                 url : '/Ajax/WebsiteOper.aspx?type=3',   
711.                 params : "id=" + id + "&name=" + l + '&value=' + lie   
712.             });   
713.     var cursor = this.getBottomToolbar().cursor;   
714.     ds.load({   
715.                 params : {   
716.                     start : cursor,   
717.                     limit : this.getBottomToolbar().pageSize   
718.                 }   
719.             });   
720.   
721. }   
722.   
723. function DEL(Obj) {   
724.     var cursor = Obj.getBottomToolbar().cursor;   
725.     ds.load({   
726.                 params : {   
727.                     start : cursor,   
728.                     limit : Obj.getBottomToolbar().pageSize   
729.                 }   
730.             });   
731. }