Extjs 表格拖动滚动 Gridpanel拖动行自动滚动效果

最近工作上遇到一个需求，就是通过对表格行拖动来对表格里面的数据进行排序。在开发过程中遇到一个问题，就是表格行可以拖动。但是当拖动行到表格底部时，内容块无法自动滚动。

于是查看了gridpanel的api文档，containerScroll该项是用来配置表格在拖动过程中自动产生滚动的效果。原来在表格内部设置了enableDragDrop属性为true时，表格会在构造时给表格添加一个拖动事件。即Ext.grid.GridDragZone。通过查看该类的API，这里面确实有配置内容滚动的属性：

containerScroll : Boolean

如果为true，使用Scrollmanager注册此容器， 在拖拽过程中可以自动进行滚动。

于是马上配置了该属性以为问题解决了，没想到在配置完该项属性之后表格在拖动行时，即使到达表格底部，内容的数据仍然不会产生滚动效果。
相信很多人都会遇到同样的问题，后面通过查找资料终于找到了解决办法。在表格内部添加的Ext.grid.GridDragZone拖动效果里面配置信息有问题。这里可以通过额外的配置可以解决这种问题。
有两种解决办法：
1.通过在修改源代码在代码内部修改表格初始化Ext.grid.GridDragZone拖动，这样就可以从根源上解决问题，不过一般不提倡修改框架本身的代码
2.首先将enableDragDrop设为false。在表格render事件内部自己构造一个拖动即自己定义一个Ext.grid.GridDragZone，

var dd = new Ext.grid.GridDragZone(grid, {
        	ddGroup : grid.ddGroup || 'GridDD',
        	containerScroll:true,
        	scroll:true,
        	afterDragDrop:function(target,e,id){
        		var dragData = this.dragData;
        		
        	}
    	});

通过这样简单的配置就能为表格重新添加一个行拖动效果。要想实现拖动自动滚动效果还得依赖extjs提供的另外的一个全局实例：

Class Ext.dd.ScrollManager

包:	Ext.dd
所在文件:	ScrollManager.js
Class:	ScrollManager
继承自:	Object

在进行拖拽操作时，自动为超出页面的区域提供滚动条。

ScrollManager配置项将被用作注册到其上的所有容器的默认值，但是你也可以通过能滚动的容器覆盖大部分配置项，添加一个 ddScrollConfig 对象到目标元素，它包含如下属性 : hthresh, vthresh, increment 和 frequency.

在查看完该类的API文档之后，知道，该类是一个单例，不能实例化，但是可以直接调用。所有的滚动事件都可以通过该类注册来实现。

var el = Ext.get('scroll-ct');
el.ddScrollConfig = {
    vthresh: 50,
    hthresh: -1,
    frequency: 100,
    increment: 200
};
Ext.dd.ScrollManager.register(el);

看完这个类的使用方法，于是终于找到了如何解决表格拖动滚动的办法了。

Ext.dd.ScrollManager.register(grid.getView().getEditorParent());

通过这行代码即可实现表格行拖动滚动效果。

文章先写到这里了，稍后将奉上一个实例供大家下载。 good luck！