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报表行拖动插件
热度:208 发布时间:2012-10-09 10:21:45.0
相关解决方案
- Extjs grid 失去选中行的列数据
- extjs 后台有数据,但是返回到页面为空,jsonStore加载错误,这是咋回事
- S2SH、EXTJS、JSON调整后,EXTJS接收不到Struts2的Action传回的值,无语
- extjs 简单有关问题
- extjs+struts2解决办法
- ExtJs 处理 datetime 有关问题
- 【EXTJS】iframe里嵌套ext.window,怎样使ext.window弹出到iframe外,该怎么解决
- Tomcat + extjs 入门有关问题
- extjs ColumnModel 怎么实现表格中的数据小数点对齐
- Extjs 变量前的一个加号代表什么意思?解决方法
- extjs grid 怎么实现 行选中变色
- ExtJs 提交表单的小疑点
- 自己写的Asp.net Ajax,Jquery,ExtJs 三种Ajax技术框架比较,希望大家提提意见,多谢
- EXTJS grid的getView的refresh步骤报this.grid为空或不是对象
- EXTJS grid的getView的refresh方法报this.grid为空或不是对象解决办法
- Extjs 上拉菜单如何实现拼音输入进行检索
- ExtJs ComboBox 上拉数据较多时,怎么提供模糊搜索
- extjs grid.Panel 局部刷新,该如何处理
- extjs window 弹出框有关问题 怪事
- ExtJs ComboBox 下拉数据较多时,怎么提供模糊搜索
- 英语翻译(extjs 中的Ext.Component)解决方案
- Extjs Ext.data.Store使用有关问题
- ExtJs Combobox绑值有关问题
- EXTJS GridPanel怎么设置多选
- EXTJS 在 IE 中 数据丢失。求解决方法。
- extjs grid 动态设置行单元格可编辑
- EXTJS DateField 效果显示解决方法
- Extjs Menu 实现动态多级菜单
- extjs grid.Panel 局部刷新,该如何处理
- ExtJs ComboBox 上拉数据较多时,怎么提供模糊搜索