修改DataGrid得默认scroll行为

用过Ext的人也许都会注意到,DataGrid的scroll行为只在当前DataGrid中有效。比如,一个带有纵向滚动条的DataGrid,如果我们把鼠标停留在DataGrid上并滚动滚轴,DataGrid中的条目就会随之滚动起来,一直到最后一条为止。这个时候,如果继续滚动,则不会有任何响应。整个网页也不会跟着滚动。在很多情况下,这样做是正确的,其目的是防止整个网页的滚动。因为当在DataGrid中滚动到最后一行时,用户很可能不希望整个网页随着鼠标滚轴滚动。

但是在有些情况下这一行为并不适用。例如在我的一个项目中,页面上并不会指定DataGrid的高度,而是让数据自动把整个DataGrid撑起来,这样的话,DataGrid上就不会出现滚动条。而这个DataGrid占据着页面上较大的一部分,用户的鼠标通常会停留在DataGrid上进行滚动,其目的实际上是滚动整个网页。这个时候,如果不改变Ext的默认行为,网页就不会滚动,这种用户体验就是错误的。

去看看Ext的文档,并没有这方面相关的说明,看来Ext本身并没有提供这样一个选项可以设置DataGrid的scroll行为。看来只能自己研究一下了。还好自己多少也和Ext打了些交道,估计这部分可能在Grid或GridView这两个文件中。分别去看这两个东东的源代码,感觉Grid不像,先暂时排除,然后去GridView里面找,发现有一个handleWheel函数,八成就是这个了,其代码是
[code]
handleWheel: function(e) {
var d = e.getWheelDelta();
this.scroller.dom.scrollTop -= d * 22;
// set this here to prevent jumpy scrolling on large tables
this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
e.stopEvent();
}
[/code]
看不懂的代码咱就不说了,关键是这里有个e.stopEvent()调用,就是它把页面的鼠标滚动事件吞了下去。那么去掉这个东东就好了。
[code]
Ext.override(Ext.grid.GridView, {
handleWheel: function(e) {
var d = e.getWheelDelta();
this.scroller.dom.scrollTop -= d * 22;
// set this here to prevent jumpy scrolling on large tables
this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
}
});
[/code]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值