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()); } });
extjs表格行拖动插件
最新推荐文章于 2020-03-13 11:56:04 发布