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加载错误,这是咋回事
- 【EXTJS】iframe里嵌套ext.window,怎样使ext.window弹出到iframe外,该怎么解决
- Tomcat + extjs 入门有关问题
- extjs ColumnModel 怎么实现表格中的数据小数点对齐
- Extjs 变量前的一个加号代表什么意思?解决方法
- extjs grid 怎么实现 行选中变色
- EXTJS grid的getView的refresh步骤报this.grid为空或不是对象
- EXTJS grid的getView的refresh方法报this.grid为空或不是对象解决办法
- ExtJs ComboBox 上拉数据较多时,怎么提供模糊搜索
- extjs grid.Panel 局部刷新,该如何处理
- extjs window 弹出框有关问题 怪事
- ExtJs ComboBox 下拉数据较多时,怎么提供模糊搜索
- 英语翻译(extjs 中的Ext.Component)解决方案
- ExtJs Combobox绑值有关问题
- EXTJS GridPanel怎么设置多选
- EXTJS 在 IE 中 数据丢失。求解决方法。
- extjs grid 动态设置行单元格可编辑
- EXTJS DateField 效果显示解决方法
- Extjs Menu 实现动态多级菜单
- extjs grid.Panel 局部刷新,该如何处理
- ExtJs ComboBox 上拉数据较多时,怎么提供模糊搜索
- Extjs TreeStore 的施用
- extJs tree,该怎么处理
- Extjs TreeStore 的应用
- 会用jquery,dwr,再有没有必要学习dojo,extjs
- extJs tree解决办法
- ExtJS 中运用Asp.net编写后台服务器程序的几种方式
- extjs+php ,大家来看看是小弟我的json输出的有关问题,还是小弟我的extjs没有写对呢
- extjs grid表的显示有关问题