Ext gridpanel 在chrome错位

阅读更多

当ExtJS3.4.0版本（其之前的版本应该也存在此问题）的Grid组件中同时存在水平和垂直滚动条时，在Chrome浏览器下（基于webkit渲染引擎下的浏览，safari也存在，本人未测）垂直滚动条会导致内容列错位。这是一个浏览器兼容性的ExtJS原生BUG（EXTJSIII-47），在ExtJS3.4.2版本中解决了。
具体效果如下图：

通过上图，可以明显的看到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;
    }
}

对于我这种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后，此问题解决：

转载http://ju.outofmemory.cn/entry/83965