当前位置: » 首页 » Extjs 框架 » 【BUG】ExtJS3.4.0的Grid中垂直滚动条导致列错位的解决方法

【BUG】ExtJS3.4.0的Grid中垂直滚动条导致列错位的解决方法

当ExtJS3.4.0版本(其之前的版本应该也存在此问题)的Grid组件中同时存在水平和垂直滚动条时,在Chrome浏览器下(基于webkit渲染引擎下的浏览,safari也存在,本人未测)垂直滚动条会导致内容列错位。这是一个浏览器兼容性的ExtJS原生BUG(EXTJSIII-47),在ExtJS3.4.2版本中解决了。
具体效果如下图:
ext-3.4.0-grid
通过上图,可以明显的看到Grid组件的内容列发生“错位”的现象。

遇到问题的时候,本人试图通过调试源码和修改样式来解决这个问题,无奈能力有限,只能去官方社区寻找答案。在更换了N个搜素关键字后,终于找到下面两个类似于上述BUG的帖子:
1.Webkit浏览器引发的ExtJS BUG (ExtJS BUGIIS-47 )
2.ExtJS 3.2: Grid column header grouping
第一个帖子的解决方法测试是可用的,它主要是修改获取列宽度之和的方法(getTotalWidth)来修复这个问题,由于Webkit渲染引擎的变更(webkit352.3, chrome19以后 box-sizing默认为W3C的标准Box Model)导致每个列宽度计算的时候,列的宽度没有把列的边框宽度计算在内(ExtJS3.x中列边框左右分别为1px,合计2px),因此再重载getTotalWidth方法时,为每个列加上2px的边框宽度,此问题即可解决。
第二帖子中的回复内容中,采用CSS样式来解决此问题,我更倾向于采用这种方法解决。

对于我这种CSS菜鸟来说,这几行勉强看懂,但是对于“-webkit-min-device-pixel-ratio:0”这个media type,倒是没用过;还有box-sizing的理解也比较模糊,找了几篇文章,其中几篇非常值得研读:
1.media type与media query
2.各浏览器的Hack写法(其中包含@media screen and (-webkit-min-device-pixel-ratio:0)这种写法的说明)
3.CSS3 Box-sizing
添加上述CSS后,此问题解决:
ext-3.4.0-grid-normal

最受欢迎

发表评论