最近在一个项目中,客户要求业务列表可定制(显示/隐藏、宽度设置、排序等),由于项目前期没有考虑对定制的规划,所以没考虑使用数据库或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保存状态功能虽然好用,不过还是慎用为好。
分享到:
相关推荐
ExtJS的GridPanel导出excel文件,方便快捷易懂!
EXTJS.GRIDPANEL中日期格式 设置
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
主要介绍了ExtJs中gridpanel分组后组名排序实例代码,有需要的朋友可以参考一下
Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
NULL 博文链接:https://topbox163.iteye.com/blog/1276463
此文件用于项目首页内容,使用了ExtJs中的GridPanel
Extjs 关于cookie 实现实时存储 数据存储的操作, 将数据存放cookie中,防止断电
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
...
...
后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义...
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629829
博文链接:https://zjnbshifox.iteye.com/blog/147574
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647