2007-09-17

修改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函数，八成就是这个了，其代码是 
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();
}

看不懂的代码咱就不说了，关键是这里有个e.stopEvent()调用，就是它把页面的鼠标滚动事件吞了下去。那么去掉这个东东就好了。 
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;
    }
});
评论
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

AllenYoung
  • 浏览: 137423 次
  • 来自: 上海交通大学软件学院
  • 详细资料
搜索本博客
最近加入圈子
存档
最新评论