当ExtJS3.4.0版本(其之前的版本应该也存在此问题)的Grid组件中同时存在水平和垂直滚动条时,在Chrome浏览器下(基于webkit渲染引擎下的浏览,safari也存在,本人未测)垂直滚动条会导致内容列错位。这是一个浏览器兼容性的ExtJS原生BUG(
EXTJSIII-47
),在ExtJS3.4.2版本中解决了。
具体效果如下图:
1. media type与media query
2. 各浏览器的Hack写法(其中包含@media screen and (-webkit-min-device-pixel-ratio:0)这种写法的说明)
3. CSS3 Box-sizing
添加上述CSS后,此问题解决:
具体效果如下图:
通过上图,可以明显的看到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样式来解决此问题,我更倾向于采用这种方法解决。
@media screen and (-webkit-min-device-pixel-ratio:0) {
.x-grid3-cell, /* Normal grid cell */
.x-grid3-gcell /* Grouped grid cell (esp. in head)*/
{
box-sizing: border-box;
}
}
1. media type与media query
2. 各浏览器的Hack写法(其中包含@media screen and (-webkit-min-device-pixel-ratio:0)这种写法的说明)
3. CSS3 Box-sizing
添加上述CSS后,此问题解决:
原文:http://ju.outofmemory.cn/entry/83965