`

修改DataGrid得默认scroll行为

    博客分类:
  • Web
EXT 
阅读更多
用过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;
    }
});

分享到:
评论

相关推荐

    修改DataGrid表头样式

    本篇将详细介绍如何修改DataGrid的表头样式,以实现个性化的设计。 首先,我们要理解DataGrid的结构。DataGrid由多个部分组成,其中表头(Header)是显示列标题的部分。表头样式包括字体、颜色、背景色、对齐方式、...

    直接修改DataGrid的举例应用

    直接修改DataGrid的行为通常涉及到以下几个方面: 1. **列的定制**:你可以自定义DataGrid的列类型、列宽、标题等。例如,创建一个新的DataGridViewTextBoxColumn并添加到DataGrid中: ```csharp ...

    wpf通过datagrid操作数据库,实现datagrid增删改操作。

    - **修改**:DataGrid的默认行为是实时编辑,用户可以直接在单元格中修改值,更改会自动反映到数据源。如果需要在提交更改前进行验证,可以监听`CellEditEnding`事件。 4. **命令处理**: 使用MVVM(Model-View-...

    wpf中datagrid动态设置单元格背景

    在WPF(Windows Presentation Foundation)开发中,`DataGrid`控件是一个常用的数据展示组件,类似于Excel表格。它允许我们以表格形式展示数据,并提供了丰富的功能,如排序、分页、编辑等。当我们需要根据数据的...

    vb中datagrid控件的详细使用方法

    你可以通过修改`BackColor`、`ForeColor`、`BorderColor`等属性来改变`DataGrid`的外观。对于列的样式,可以设置`DefaultCellStyle`和`HeaderStyle`属性。 8. **行选择和行事件** `DataGrid`的行可以选择,`...

    DataGrid自定义列标题

    默认情况下,DataGrid会根据绑定的数据源自动创建列。若要自定义列标题,可以在AutoGeneratingColumn事件中处理: ```csharp private void DataGrid_AutoGeneratingColumn(object sender, ...

    Wpf datagrid 多选、单选、反选

    默认情况下,`DataGrid`只支持单选,即一次只能选择一行。要实现多选,我们需要开启`DataGrid`的多选模式。这可以通过设置`DataGrid`的`SelectionMode`属性为`Extended`来实现: ```xml <DataGrid SelectionMode=...

    在DataGrid中使用CheckBox,实现全选功能

    在.NET框架中,Windows Forms和WPF应用中经常使用DataGrid控件来展示和操作数据。这个场景下,用户可能需要实现一个常见的功能,即在DataGrid中添加CheckBox,允许用户进行多选操作,尤其是全选功能。这篇博客“在...

    Wpf datagrid 增删改查

    本例子是wpf中datagrid的增加修改,对于datagrid中的canuseraddrows=true,对当前空白行进行的添加数据,修改时,鼠标离开焦点可自动更新数据库,删除等等。不需要多余的界面进行添加修改等,利用datagrid的属性,...

    WPF DataGrid行号

    虽然`DataGrid` 默认不提供行号功能,但可以通过一些自定义方法来实现。本篇文章将详细介绍如何利用附加行为(Attached Behavior)的方式在WPF的`DataGrid` 中添加行号。 首先,我们需要理解附加行为的概念。附加...

    silverlight DataGrid 不修改数据显示行号

    ### Silverlight DataGrid 不修改数据显示行号 #### 背景与概述 在Silverlight应用程序开发过程中,`DataGrid`控件是展示数据表格时常用的一种工具。它提供了丰富的功能来展示、排序、筛选和编辑数据集合。但在...

    jeasyui-datagrid-datagrid

    为了满足不同需求,开发者可以通过CSS调整DataGrid的外观,或通过监听DataGrid的事件(如`onClickRow`、`onDblClickRow`)来实现特定行为。 9. **性能优化** 在大数据量场景下,DataGrid支持虚拟滚动和延迟加载。...

    easyui Datagrid 数据列表比较上一个上传的增加了超链接并传值、条件清空、日期控件清空和数据修改功能

    Datagrid提供了撤销修改的能力,通过`onBeforeRevertCell`和`onAfterRevertCell`事件,可以检测并回滚用户的编辑操作,保持数据的一致性。 这些功能使得EasyUI Datagrid成为一个全面的数据管理工具,能够满足大...

    DataGrid中嵌套DataGrid

    而"DataGrid中嵌套DataGrid"是一种复杂但非常实用的技术,它允许在一个DataGrid的行或列中内嵌另一个DataGrid,以展示层次化数据或相关联的数据集。这种技术同样适用于DataGrid与DataList,以及DataList之间的嵌套,...

    WPF datagrid 表格复选框

    这是`DataGrid`中的一个特殊列类型,它允许我们完全自定义单元格的显示内容和行为。在`DataGridTemplateColumn`中,我们可以定义`HeaderTemplate`和`CellTemplate`,分别控制表头和单元格的显示样式。 对于`...

    给DataGrid自定义Header功能

    然而,DataGrid的默认功能往往无法满足所有需求,这时我们就需要进行自定义扩展,比如自定义Header。标题“给DataGrid自定义Header功能”和描述“给DataGrid添加自定义的headerRenderer,实现在Header上自己添加想要...

    easyui datagrid 增加鼠标悬停弹窗事件

    由于EasyUI Datagrid的默认行为不包括鼠标悬停弹窗,我们需要通过修改源码或者扩展实现来添加这个功能。在描述中提到的方法是直接修改了源码,这可能涉及到对EasyUI内部机制的理解,以及对源码的调试和测试。 4. *...

    wpf datagrid实现树结构.rar

    WPF的DataGrid控件默认并不支持树形结构,但可以通过自定义模板和数据绑定来实现这一功能。这通常涉及到对HierarchicalDataTemplate的使用,该模板允许DataGrid展示具有层级关系的数据源。 `Person.cs`文件可能是...

    easyui datagrid 表格 打印

    当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能并不一定能完美地呈现格式化的数据。标题“easyui datagrid表格打印”关注的就是如何解决这个问题,即如何将经过...

    DataGrid全选实例

    DataGrid全选实例,rar前加个".",如“DataGrid.rar”

Global site tag (gtag.js) - Google Analytics