Extjs中GridPanel慎用cookie保存状态

最近在一个项目中，客户要求业务列表可定制（显示/隐藏、宽度设置、排序等），由于项目前期没有考虑对定制的规划，所以没考虑使用数据库或XML保存列表的状态属性来实现定制，而去寻找最小改动的方式来满足客户要求。

几经搜索，找到Extjs的GridPanel使用cookie可以很容易实现列表定制的保存，进行如下两步设置即可：

1.开启cookie

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({expires: new Date(new Date().getTime()+(1000*60*60*24*365))})); //设置过期时间，这里设置一年

2.给相应的GridPanel添加两个参数

stateful:true, //true为启用cookie保存grid状态
stateId:"xxxx-cookie-grid" //这将被用于生成cookie的id

  经过上面两步设置后，定制功能实现了（在开启cookie的同个浏览器下），接着使用这种方式改造了项目中的其它业务列表、报表列表等。

  起初，由于不了解浏览器对cookie的大小等限制，且未对使用定制的列表同时进行测试，所以没有发现问题（有时清除浏览器缓存，将cookie一并清除了）；

  后来同事在测试时，反馈在FF下整个系统都是空白页，连登录页都是空白（且有时在后台报出header之类超出服务器处理限制）。不知道是什么原因，让同事直接清空浏览器缓存、cookie后重试，系统又可以正常访问了。

  接着考虑是不是cookie的问题，上网搜索得知知浏览下cookie的限制：http://tipx.iteye.com/blog/849244
  （ 很无齿的转载了，备忘用。）

  进一步验证问题确实是出在cookie身上。打开FF的cookie查看窗口，找到系统所属的域，复制出其中一个grid所存储的cookie（cookie的名称是使用stateId加上前缀生成的，各浏览器应该类似），存为文本并查看大小，差不多1kb，而基本浏览器对一个域的大小限制为4kb，而项目中有远远不止4个列表使用了cookie存储状态。

  接着清空FF的cookie（清空当前域的即可），重新打开项目，定制一个grid、两个grid、三个grid，定制完刷新各页面皆正常；当定制生成第四个grid的cookie后，刷新项目的页面，页面全部变成空白，打开FF的cookie查看窗口，找到项目对应的cookie，删除其中一个grid的cookie后，再次刷新项目页面，页面恢复正常。

----------------------传说中腹黑的分害线---------------------
综上所述，由于Extjs的GridPanel在保存信息到cookie时，要保存的内容相对比较多（比如包含了：列索引、排序、显示/隐藏，还要算上字段个数等），很容易超出浏览器的cookie限制，所以GridPanel自带的cookie保存状态功能虽然好用，不过还是慎用为好。

评论

6 楼 hongyang070 2011-07-29  

我也遇到这样的问题了.郁闷啊!!!

5 楼 tipx 2010-12-28  

kenken0y 写道

用HttpProvider不就可以了吗?

对HttpProvider没了解过，刚刚搜索了下，原来是插件，研究使用下，谢谢指教。

4 楼 kenken0y 2010-12-23  

并且还要加上这段才能用

Ext.override(Ext.grid.ColumnModel, {
    setState: function (col, state) {
        Ext.apply(this.lookup[col], state);
    }
});

3 楼 kenken0y 2010-12-23  

用HttpProvider不就可以了吗?

2 楼 tipx 2010-12-23  

doylecnn 写道

所以,解决方案在哪里?

  所以暂时还是只能用数据库或XML等其它方式，手动存/取GridPanel的字段信息.

1 楼 doylecnn 2010-12-22  

所以,解决方案在哪里?