当前位置: 代码迷 >> Web前端 >> 解决ext treegrid在IE7中水准拖动表头不能跟着拖动BUG
  详细解决方案

解决ext treegrid在IE7中水准拖动表头不能跟着拖动BUG

热度:23   发布时间:2012-10-24 14:15:58.0
解决ext treegrid在IE7中水平拖动表头不能跟着拖动BUG
运行环境:
IE7。只有当IE7才会出现这样的问题,经测试IE8,firefox都是正常的。
问题描述:
项目需要用到了ext例子中的treegrid,有用过的朋友不值到有没有碰到过这样的问题,当列很多长度超过设的宽度时,就会出现水平滚动条,前提时不要设置treegrid的autoscroll属性,设置了会把外面panel的滚动条调出来。当你水平拖动的时候,是否会发现表头的背景是跟着在滚动,可是栏位的值却不会滚动。
解决过程:
在查找了源代码后,也试了一些方法都无济于事,而且还在源代码中设置表头滚动方法发现了这样的注释:
syncHeaderScroll : function(){
        var mb = this.innerBody.dom;
        this.innerHd.dom.scrollLeft = mb.scrollLeft;
        this.innerHd.dom.scrollLeft = mb.scrollLeft;
// second time for IE (1/2 time first fails, other browsers ignore)
    },
显然作者已经提醒我们水平滚动时会在IE中出现问题。最后试着采用重写表头的CSS样式来控制,在treegrid.CSS文件里面看到控制表头的样式,
.x-treegrid-header-inner {
    overflow: hidden;
    position:relative;
}
红色部分是我添加的,添加这个属性后,水平拖动的问题就解决了。

心得体会:事情很小,也不影响功能只是用户体验问题,却倒腾了一上午,明白做事情一定要仔细考虑才下手去做,磨刀不会误砍柴的功夫的。