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[i], true);// 隐藏列模型
10         }
11     }
12 }

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

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

var ds;
var varHiddenColumn = "";
var boolHasClosedGrid = false;
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);

            }
        })
function QueryWebTraceByAll() {
    var varDefaultState = "";
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
    Ext.QuickTips.init();
    // var fm = Ext.form;
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
                header : '编号',
                width : 40,
                dataIndex : 'Id',
                sortable : true
            }, {
                header : '域名',
                width : 100,
                dataIndex : 'HostName',
                renderer : change,
                sortable : true

            }, {
                header : '流量',
                width : 50,
                dataIndex : 'PageView',
                sortable : true
            }, {
                header : '测试域名',
                width : 100,
                dataIndex : 'TestHostName',
                renderer : change,
                sortable : true
            }, {
                header : '服务器IP',
                width : 140,
                dataIndex : 'WebSpace',
                sortable : true
            }, {
                header : '空间用户名',
                width : 100,
                dataIndex : 'WebSpaceUserName',
                sortable : true
            }, {
                header : '空间名',
                width : 100,
                dataIndex : 'WebSpaceNumber',
                sortable : true
            }, {
                header : "Ftp密码",
                width : 100,
                dataIndex : 'FtpPwd',
                sortable : true
            },
            {
                header : '备案号',
                width : 140,
                dataIndex : 'BeiAn',
                sortable : true
            },// renderer:renderFoo,

            {
                header : '域名服务商',
                width : 140,
                dataIndex : 'HostNameSP',
                sortable : true
            },// renderer:renderFoo,

            {
                header : '域名注册时间',
                width : 140,
                dataIndex : 'HostNameRegDate',
                sortable : true
            },// renderer:renderFoo,

            {
                header : '域名到期时间',
                width : 140,
                dataIndex : 'HostNameExpireDate',
                sortable : true
            },// renderer:renderFoo,

            {
                header : '类型',
                width : 50,
                dataIndex : 'WebType',
                sortable : true
            }, {
                header : '主关键字',
                width : 100,
                dataIndex : 'KeyWords',
                sortable : true
            }, {
                header : '副关键词',
                width : 100,
                dataIndex : 'SubKeyWords',
                sortable : true
            }, {
                header : '状态',
                width : 100,
                dataIndex : 'State',
                sortable : true
            }, {
                header : '分配人',
                width : 100,
                dataIndex : 'Assumer',
                sortable : true
            }, {
                header : '制作人',
                width : 40,
                dataIndex : 'Producer',
                sortable : true
            }, {
                header : '模板',
                width : 56,
                dataIndex : 'Template',
                sortable : true
            }, {
                header : '负责人',
                width : 40,
                dataIndex : 'Maintainer',
                sortable : true
            }, {
                header : '组长',
                width : 40,
                dataIndex : 'TeamLeader',
                sortable : true
            }, {
                header : '维护人51la',
                width : 65,
                dataIndex : 'MaintainerStatisId',
                sortable : true
            }, {
                header : '网站51la',
                width : 51,
                dataIndex : 'StatisId',
                sortable : true
            }, {
                header : '密码',
                width : 45,
                dataIndex : 'MaintainerFivelaPwd',
                sortable : true
            }, {
                header : '收录',
                width : 30,
                dataIndex : 'Baidu',
                sortable : true
            }, {
                header : '分配时间',
                width : 100,
                dataIndex : 'ToTeamLeaderDate',
                sortable : true
            }, {
                header : '制作时间',
                width : 100,
                dataIndex : 'StartDoDate',
                sortable : true
            }, {
                header : '完成时间',
                width : 100,
                dataIndex : 'EndDoDate',
                sortable : true
            }, {
                header : '审核时间',
                width : 100,
                dataIndex : 'CheckDate',
                sortable : true
            }, {
                header : '组员评分',
                width : 100,
                dataIndex : 'Score',
                sortable : true
            }, {
                header : '分配人评分',
                width : 100,
                dataIndex : 'AssumerScore',
                sortable : true
            }, {
                header : '综合评分',
                width : 100,
                dataIndex : 'TotalScore',
                sortable : true
            }]);

    // proxy直接去读取josn数据【
    ds = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : 'WebTask/WebsiteGeneral/ShowWebSiteAsZWToLeader.aspx'
                        }),
                reader : new Ext.data.JsonReader({
                            totalProperty : 'totalProperty',
                            root : 'Head',
                            successProperty : 'success'
                        }, [{
                                    name : 'Id',
                                    mapping : 'Id',
                                    type : 'int'
                                }, {
                                    name : 'HostName',
                                    mapping : 'HostName',
                                    type : 'string'
                                }, {
                                    name : 'TestHostName',
                                    mapping : 'TestHostName',
                                    type : 'string'
                                }, {
                                    name : "FtpPwd",
                                    mapping : "FtpPwd",
                                    type : "string"
                                }, {
                                    name : 'WebSpaceNumber',
                                    mapping : 'WebSpaceNumber',
                                    type : 'string'
                                }, {
                                    name : 'WebSpaceUserName',
                                    mapping : 'WebSpaceUserName',
                                    type : 'string'
                                }, {
                                    name : 'BeiAn',
                                    mapping : 'BeiAn',
                                    type : 'string'
                                }, {
                                    name : 'State',
                                    mapping : 'State',
                                    type : 'string'
                                }, {
                                    name : 'WebSpace',
                                    mapping : 'WebSpace',
                                    type : 'string'
                                }, {
                                    name : 'Assumer',
                                    mapping : 'Assumer',
                                    type : 'string'
                                }, {
                                    name : 'HostNameSP',
                                    mapping : 'HostNameSP',
                                    type : 'string'
                                }, {
                                    name : 'HostNameRegDate',
                                    mapping : 'HostNameRegDate',
                                    type : 'string'
                                }, {
                                    name : 'HostNameExpireDate',
                                    mapping : 'HostNameExpireDate',
                                    type : 'string'
                                }, {
                                    name : 'MaintainerStatisId',
                                    mapping : 'MaintainerStatisId',
                                    type : 'string'
                                }, {
                                    name : 'StatisId',
                                    mapping : 'StatisId',
                                    type : 'string'
                                }, {
                                    name : 'MaintainerFivelaPwd',
                                    mapping : 'MaintainerFivelaPwd',
                                    type : 'string'
                                }, {
                                    name : 'Baidu',
                                    mapping : 'Baidu',
                                    type : 'string'
                                }, {
                                    name : 'PageView',
                                    mapping : 'PageView',
                                    type : 'string'
                                }, {
                                    name : 'WebType',
                                    mapping : 'WebType',
                                    type : 'string'
                                }, {
                                    name : 'KeyWords',
                                    mapping : 'KeyWords',
                                    type : 'string'
                                }, {
                                    name : 'SubKeyWords',
                                    mapping : 'SubKeyWords',
                                    type : 'string'
                                }, {
                                    name : 'StartTaskDate',
                                    mapping : 'StartTaskDate',
                                    type : 'string'
                                }, {
                                    name : 'CheckDate',
                                    mapping : 'CheckDate',
                                    type : 'string'
                                }, {
                                    name : 'StartDoDate',
                                    mapping : 'StartDoDate',
                                    type : 'string'
                                }, {
                                    name : 'EndDoDate',
                                    mapping : 'EndDoDate',
                                    type : 'string'
                                }, {
                                    name : 'TeamLeader',
                                    mapping : 'TeamLeader',
                                    type : 'string'
                                }, {
                                    name : 'Maintainer',
                                    mapping : 'Maintainer',
                                    type : 'string'
                                }, {
                                    name : 'Producer',
                                    mapping : 'Producer',
                                    type : 'string'
                                }, {
                                    name : 'Template',
                                    mapping : 'Template',
                                    type : 'string'
                                }, {
                                    name : 'ToTeamLeaderDate',
                                    mapping : 'ToTeamLeaderDate',
                                    type : 'string'
                                }, {
                                    name : 'ToTeamDate',
                                    mapping : 'ToTeamDate',
                                    type : 'string'
                                }, {
                                    name : 'Score',
                                    mapping : 'Score',
                                    type : 'string'
                                }, {
                                    name : 'AssumerScore',
                                    mapping : 'AssumerScore',
                                    type : 'string'
                                }, {
                                    name : 'TotalScore',
                                    mapping : 'TotalScore',
                                    type : 'string'
                                }]),
                remoteSort : true
            });

    var store = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({
                    url : "WebTask/WebsiteGeneral/GetEmployeeAsGroup.aspx?type=z"
                }), // 数据源
        reader : new Ext.data.JsonReader({
                    totalProperty : "totalPorperty",
                    root : "Head",
                    successProperty : 'success',
                    fields : [{
                                name : 'id',
                                mapping : 'id',
                                type : 'string'
                            }, {
                                name : 'username',
                                mapping : 'username',
                                type : 'string'
                            }]
                })
            // 如何解析
    });

    store.load();

    var storeddl = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({
                    url : "WebTask/WebsiteGeneral/GetParaList.aspx?MenuId=0010"
                }), // 下拉框数据源
        reader : new Ext.data.JsonReader({
                    totalProperty : "totalPorperty",
                    root : "Head",
                    successProperty : 'success',
                    fields : [{
                                name : 'ParaName',
                                mapping : 'ParaName',
                                type : 'string'
                            }, {
                                name : 'ParaValue',
                                mapping : 'ParaValue',
                                type : 'string'
                            }]
                })
            // 如何解析
        });
    // 状态数据集，非数据库
    var DdlState = new Ext.data.SimpleStore({
                fields : ['ParaName', 'ParaValue'],
                data : [['所有', ''], ['准备制作', '准备制作'], ['正在制作中', '正在制作中'],
                        ['已制作完成', '已制作完成'], ['已审核', '已审核'],
                        ['已分配给组长', '已分配给组长'], ['已分配给组员', '已分配给组员']]
            });
    storeddl.load();

    // 网站制作状态静态数据
    var liebie = new Ext.form.ComboBox({
                id : 'dropdownliststate',
                emptyText : '请选择网站制作状态',
                mode : 'local', // 数据模式,local为本地模式
                readOnly : true,
                hidden : true,
                displayField : 'ParaName',
                valueField : 'ParaValue',
                triggerAction : 'all',
                name : 'identity', // 作为form提交时传送的参数
                store : DdlState,
                listeners : {
                    select : {
                        fn : function(combo, record, index) {
                            // 先清理数据
                            ds.removeAll();
                            ds.baseParams = {
                                paraname : grid.topToolbar.items.items[0].value,
                                paravalue : record.get('ParaValue')
                            };

                            ds.load({
                                        callback : function(r, options, success) {
                                            if (success == false) {
                                                // 如果没有数据就清空
                                                ds.removeAll();
                                                Ext.MessageBox.alert('提示',
                                                        'Sorry,没有符合条件的数据');
                                            }
                                        }
                                    });
                            ds.reload({
                                        params : {
                                            start : 0,
                                            limit : 20
                                        }
                                    });
                        }
                    }
                }
            });

    var grid = new Ext.grid.EditorGridPanel({
        renderTo : 'grid3',
        ds : ds,
        sm : sm,
        stripeRows : true,

        cm : cm,
        width : 700,
        height : 280,

        loadMask : true,
        tbar : new Ext.Toolbar({
            items : [new Ext.form.ComboBox({
                        id : 'ComSearch',
                        emptyText : '请选择搜索项目',
                        mode : 'remote', // 数据模式,local为本地模式
                        readOnly : true,
                        displayField : 'ParaName',
                        valueField : 'ParaValue',

                        triggerAction : 'all',
                        name : 'identity', // 作为form提交时传送的参数
                        store : storeddl,
                        listeners : {
                            select : {
                                fn : function(combo, record, index) {
                                    if (record.get('ParaValue') == 'State') {
                                        liebie.show();
                                        Ext.get('txtsearchword')
                                                .setDisplayed('none');
                                        Ext.get('btnSearch')
                                                .setDisplayed('none');
                                    } else {
                                        liebie.hide();
                                        Ext.get('txtsearchword')
                                                .setDisplayed('block');
                                        Ext.get('btnSearch')
                                                .setDisplayed('block');
                                    }
                                }
                            }
                        }

                    }),

                    // 网站状态静态数据
                    liebie, new Ext.form.TextField({
                        id : 'txtsearchword',
                        fieldLabel : '搜索文字',
                        width : 150,
                        name : 'SearchWord',
                        allowBlank : false,
                        blankText : '请输入搜索文字',
                        listeners : {
                            specialKey : function(field, e) {
                                if (e.getKey() == Ext.EventObject.ENTER) {
                                    ds.removeAll();
                                    ds.baseParams = {
                                        paraname : grid.topToolbar.items.items[0].value,
                                        paravalue : Ext.get('txtsearchword').dom.value
                                    };

                                    ds.load({
                                        callback : function(r, options, success) {
                                            if (success == false) {
                                                Ext.MessageBox.alert('提示',
                                                        'Sorry,没有符合条件的数据');
                                            }
                                        }
                                    });
                                    ds.reload({
                                                params : {
                                                    start : 0,
                                                    limit : 20
                                                }
                                            });
                                }
                            }
                        }
                    }),

                    {
                        id : 'btnSearch',
                        text : '搜索',
                        iconCls : 'search',
                        handler : function() {

                            ds.removeAll();

                            ds.baseParams = {
                                paraname : grid.topToolbar.items.items[0].value,
                                paravalue : Ext.get('txtsearchword').dom.value
                            };

                            ds.load({
                                        callback : function(r, options, success) {
                                            if (success == false) {
                                                // 如果为空就清空原来数据

                                                Ext.MessageBox.alert('提示',
                                                        'Sorry,没有符合条件的数据');
                                            }
                                        }
                                    });
                            ds.reload({
                                        params : {
                                            start : 0,
                                            limit : 20
                                        }
                                    });
                        }
                    }]
        }),

        bbar : new Ext.PagingToolbar({
            pageSize : 20,
            store : ds,
            displayInfo : true,
            displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg : "没有记录",
            items : [{
                text : '导出Excel',
                iconCls : 'add',
                tooltip : "点击导出Excel文件",
                handler : function() {
                    // 导出Excel文件
                    var cms = grid.getColumnModel(); // 获得网格的列模型
                    var strColoumnNames = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
                    var strColoumnNamesHeader = "";
                    var strAllSql = "";
                    for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列
                        if (!cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列及是否列名为空（因为如果有选择框和默认序号，则为空）
                            strColoumnNames = Ext.util.Format.trim(cms
                                    .getDataIndex(i));// 获得列名
                            // 判断是否是综合评分这列，如果是要把列名换成原始的
                            strColoumnNamesHeader = escape(Ext.util.Format
                                    .trim(cms.getColumnHeader(i)));// 获得列标题
                            strAllSql += strColoumnNames + " as "
                                    + strColoumnNamesHeader + ",";// 拼接Sql查询语句，格式
                            // 字段 as
                            // 中文标题
                        }
                    }
                    // self表示在本窗口打开
                    var varparaname = grid.topToolbar.items.items[0].value;
                    var varparavalue = Ext.util.Format.trim(Ext
                            .get('txtsearchword').dom.value);
                    var varparanametext = Ext.get('ComSearch').dom.value
                    var gridtoexcelwindow;
                    if (typeof(varparaname) == "undefined") {
                        varparaname = "State";
                        varparavalue = varDefaultState;
                        varparanametext = "默认首要业务数据";
                    }
                    gridtoexcelwindow = window
                            .open(    "Ajax/GridToExcel.aspx?sql=" + strAllSql
                                            + "&FromTable=WebTrace&ParaName="
                                            + escape(varparaname)
                                            + "&ParaNameText="
                                            + escape(varparanametext)
                                            + "&ParaValue="
                                            + escape(varparavalue), "_self",
                                    "menubar=0,scrollbar=0,resizable=0,channelmode=0,location=0,status=0");
                    gridtoexcelwindow.focus();
                }
            }]
        })
    });
    // el:指定html元素用于显示grid
    grid.render();// 渲染表格
    // 

    ds.baseParams = {
        paraname : 'State',
        paravalue : varDefaultState
    };
    ds.load({
                callback : function(r, options, success) {
                    if (success == false) {
                        ds.removeAll();
                        Ext.MessageBox.alert('提示', 'Sorry,没有符合条件的数据');
                    }
                }
            });
    ds.reload({
                params : {
                    start : 0,
                    limit : 20
                }
            });
    var win = new Ext.Window({
        layout : 'fit',
        maximizable : true,
        collapsible : true,
        width : 1000,
        height : 600,
        modal : true,
        title : "公共查询界面:在这里您可以查询您需要的网站并可以导出所需数据<br/><font color='#FF0000'><b>小提示：<br/>1、您可以点击任一列名右侧出现的箭头，在出现的下拉框中，隐藏某些您不需要的列。您再次进入此页面时将保持您上次保留的列。<br/>2、搜索支持回车键。<br/>3、在窗体底部有'导出Excel'按钮，你可以导出您需要的数据</b></font>",
        items : grid
    });
    win.show();
    grid.on("afteredit", afterEdit1, grid);
    grid.on("beforedestroy", CloseWriteCookie, grid);

    // 按用户习惯，隐藏某列
    if (boolHasClosedGrid == false)// 首次浏览
    {
        HiddenMyColumn(grid, varHiddenColumn);
        // alert(varHiddenColumn);
    }
    // 关闭grid但未关闭浏览器
    else {
        HiddenMyColumn(grid, varHiddenColumnColseGrid);
    }
}
// 隐藏列函数
function HiddenMyColumn(vargrid, varColumnIndex) {

    if (varColumnIndex != "") {
        var cms = vargrid.getColumnModel(); // 获得网格的列模型
        var strarrayUserColumn = new Array();
        strarrayUserColumn = varColumnIndex.split(",");
        for (var i = 0; i < strarrayUserColumn.length; i++) {
            cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型
        }
    }
}
// 关闭时写cookie
function CloseWriteCookie(obj) {
    var cms = obj.getColumnModel(); // 获得网格的列模型
    var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
    // alert(cms.getColumnCount());
    for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列

        if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列
            strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始
        }
    }
    // 把隐藏列存到Cookie中的同时返回隐藏列的值。
    Ext.Ajax.request({
                timeout : 3000000,
                url : '/ajax/SetUserColumnCookie.aspx',
                params : "ParaCkUserColumn=Write&UserHiddenColumn="
                        + strHiddenColoumnIndex,
                success : function(response, options) {
                    Ext.MessageBox.hide();
                    varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid
                    // alert(varHiddenColumnColseGrid);
                    boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真
                },
                failure : function(response, options) {
                    Ext.Msg.alert('错误', Ext.util.JSON
                                    .decode(response.responseText).data.msg);

                }
            }

    )
}
// 编辑时的检验是否合法，不合法不更新
function afterEdit1(obj) {
    var r = obj.record;// 获取被修改的行
    var l = obj.field;// 获取被修改的列
    var o = obj.originalValue;
    var id = r.get("Id");
    var lie = r.get(l);
    Ext.Ajax.request({
                url : '/Ajax/WebsiteOper.aspx?type=3',
                params : "id=" + id + "&name=" + l + '&value=' + lie
            });
    var cursor = this.getBottomToolbar().cursor;
    ds.load({
                params : {
                    start : cursor,
                    limit : this.getBottomToolbar().pageSize
                }
            });

}

function DEL(Obj) {
    var cursor = Obj.getBottomToolbar().cursor;
    ds.load({
                params : {
                    start : cursor,
                    limit : Obj.getBottomToolbar().pageSize
                }
            });
}

有人说Ext里本来就自带一个cookie机制，叫 Ext.state.Manager.setProvider(new Ext.state.CookieProvider())，不知如何实现保存隐藏列的功能，有实现过的能否给点代码？谢谢。

setHidden : function(colIndex, hidden){
        var c = this.config[colIndex];
        if(c.hidden !== hidden){
            c.hidden = hidden;
            this.totalWidth = null;
            this.fireEvent("hiddenchange", this, colIndex, hidden);
        }
    }

事件就是hiddenchange,是Ext.grid.ColumnModel的事件

http://www.iteye.com/topic/458411

前面最开头设置

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

grid 直接设置  stateful 和  stateId 就可以了

stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
The unique id for this component to use for state management purposes (defaults to the component id if one was set, otherwise null if the component is using a generated id).

stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startup. The component must have either a stateId or id assigned for state to be managed. Auto-generated ids are not guaranteed to be stable across page loads and cannot be relied upon to save and restore the same state for a component.

受用，谢谢。不过自己写也无坏处，培养一下思维能力。

用Ext自带的状态管理器是最方便的