Ext.Grid隐藏列扩展功能

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

1、在用户关闭Grid时，触发BeforeDestroy事件，判断那些列是隐藏的，写入Cookie： grid.on("beforedestroy", CloseWriteCookie, grid);

// 按用户习惯，隐藏某列

if (boolHasClosedGrid == false)// 首次浏览

{

  HiddenMyColumn(grid, varHiddenColumn);

  // alert(varHiddenColumn);

}

// 关闭grid但未关闭浏览器

else {

  HiddenMyColumn(grid, varHiddenColumnColseGrid);

}

复制代码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函数，执行隐藏列。 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, true);// 隐藏列模型

10        }

11    }

12 }

复制代码