extjs 표 줄 드래그 플러그인

Ext.ux.GridDragDropRowOrder = Ext.extend(Ext.util.Observable, {
	copy : false,

	scrollable : false,

	constructor : function(config) {
		if (config)
			Ext.apply(this, config);

		this.addEvents({
					beforerowmove : true,
					afterrowmove : true,
					beforerowcopy : true,
					afterrowcopy : true
				});

		Ext.ux.GridDragDropRowOrder.superclass.constructor.call(this);
	},

	init : function(grid) {
		this.grid = grid;
		grid.enableDragDrop = true;

		grid.on({
					render : {
						fn : this.onGridRender,
						scope : this,
						single : true
					}
				});
	},

	onGridRender : function(grid) {
		var self = this;

		this.target = new Ext.dd.DropTarget(grid.getEl(), {
			ddGroup : grid.ddGroup || 'GridDD',
			grid : grid,
			gridDropTarget : this,

			notifyDrop : function(dd, e, data) {
				if (this.currentRowEl) {
					this.currentRowEl.removeClass('grid-row-insert-below');
					this.currentRowEl.removeClass('grid-row-insert-above');
				}
                
				var t = Ext.lib.Event.getTarget(e);
				var rindex = this.grid.getView().findRowIndex(t);
				
				if (rindex === false || rindex == data.rowIndex) {
					return false;
				}
				if (this.gridDropTarget.fireEvent(self.copy
								? 'beforerowcopy'
								: 'beforerowmove', this.gridDropTarget,
						data.rowIndex, rindex, data.selections, 123) === false) {
					return false;
				}

				var ds = this.grid.getStore();

				var selections = new Array();
				var keys = ds.data.keys;
				for (var key in keys) {
					for (var i = 0; i < data.selections.length; i++) {
						if (keys[key] == data.selections[i].id) {
							if (rindex == key) {
								return false;
							}
							selections.push(data.selections[i]);
						}
					}
				}
				var targetRecord = this.grid.store.getAt(rindex);
				
				if (rindex > data.rowIndex && this.rowPosition < 0) {
					rindex--;
				}
				if (rindex < data.rowIndex && this.rowPosition > 0) {
					rindex++;
				}

				if (rindex > data.rowIndex && data.selections.length > 1) {
					rindex = rindex - (data.selections.length - 1);
				}

				if (rindex == data.rowIndex) {
					return false;
				}
				if (!self.copy) {
					for (var i = 0; i < data.selections.length; i++) {
						ds.remove(ds.getById(data.selections[i].id));
					}
				}

				for (var i = selections.length - 1; i >= 0; i--) {
					var insertIndex = rindex;
					ds.insert(insertIndex, selections[i]);
				}
				var sm = this.grid.getSelectionModel();
				if (sm) {
					sm.selectRecords(data.selections);
				}
				this.gridDropTarget.fireEvent(self.copy
								? 'afterrowcopy'
								: 'afterrowmove', this.gridDropTarget,
						data.rowIndex, rindex, data.selections,this.grid.store);
				return true;
			},

			notifyOver : function(dd, e, data) {
				var t = Ext.lib.Event.getTarget(e);
				var rindex = this.grid.getView().findRowIndex(t);
				var ds = this.grid.getStore();
				var keys = ds.data.keys;
				for (var key in keys) {
					for (var i = 0; i < data.selections.length; i++) {
						if (keys[key] == data.selections[i].id) {
							if (rindex == key) {
								if (this.currentRowEl) {
									this.currentRowEl
											.removeClass('grid-row-insert-below');
									this.currentRowEl
											.removeClass('grid-row-insert-above');
								}
								return this.dropNotAllowed;
							}
						}
					}
				}
				if (rindex < 0 || rindex === false) {
					if(this.currentRowEl)
					this.currentRowEl.removeClass('grid-row-insert-above');
					return this.dropNotAllowed;
				}

				try {
					var currentRow = this.grid.getView().getRow(rindex);
					var resolvedRow = new Ext.Element(currentRow).getY()
							- this.grid.getView().scroller.dom.scrollTop;
					var rowHeight = currentRow.offsetHeight;
					this.rowPosition = e.getPageY() - resolvedRow
							- (rowHeight / 2);

					if (this.currentRowEl) {
						this.currentRowEl.removeClass('grid-row-insert-below');
						this.currentRowEl.removeClass('grid-row-insert-above');
					}

					if (this.rowPosition > 0) {
						this.currentRowEl = new Ext.Element(currentRow);
						this.currentRowEl.addClass('grid-row-insert-below');
					} else {
						if (rindex - 1 >= 0) {
							var previousRow = this.grid.getView().getRow(rindex
									- 1);
							this.currentRowEl = new Ext.Element(previousRow);
							this.currentRowEl.addClass('grid-row-insert-below');
						} else {
							this.currentRowEl.addClass('grid-row-insert-above');
						}
					}
				} catch (err) {
					console.warn(err);
					rindex = false;
				}
				return (rindex === false)
						? this.dropNotAllowed
						: this.dropAllowed;
			},
			notifyOut : function(dd, e, data) {
				if (this.currentRowEl) {
					this.currentRowEl.removeClass('grid-row-insert-above');
					this.currentRowEl.removeClass('grid-row-insert-below');
				}
			}
		});
		if (this.targetCfg) {
			Ext.apply(this.target, this.targetCfg);
		}
		if (this.scrollable) {
			Ext.dd.ScrollManager.register(grid.getView().getEditorParent());
			grid.on({
						beforedestroy : this.onBeforeDestroy,
						scope : this,
						single : true
					});
		}
	},
	getTarget : function() {
		return this.target;
	},
	getGrid : function() {
		return this.grid;
	},
	getCopy : function() {
		return this.copy ? true : false;
	},
	setCopy : function(b) {
		this.copy = b ? true : false;
	},
	onBeforeDestroy : function(grid) {
		Ext.dd.ScrollManager.unregister(grid.getView().getEditorParent());
	}
});