运行环境:
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;
}
红色部分是我添加的,添加这个属性后,水平拖动的问题就解决了。
心得体会:事情很小,也不影响功能只是用户体验问题,却倒腾了一上午,明白做事情一定要仔细考虑才下手去做,磨刀不会误砍柴的功夫的。