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表格点击超链接获取行的值,和各种获取节点值的方法
Extjs表格合并代码, 由于ie6以外的浏览器的盒模型比较怪异(主因还是我自身不擅处理CSS),列头与数据列的边框有些对不齐(当前的效果已经是尽了最大努力了)
extjs表格、树控件
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
资源名称:获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
extjs grid 多表头 插件 extjs grid 多表头 插件
Ext实现的拖拽树和表格之间的拖拽,网站下MyTest目录中的文件都可以运行,但是需要下载一个Ext3.0的包放在网站的根目录下面
一款简洁的外观基于EXTJS的日期选择插件,日历插件,在网页上选择日期使用的小插件,按照ext DatePicker素材及思想简化重新实现日历选择器,尚未实现:键盘导航,小时分钟选择, 1.Date api ,某日属于周几,某月...
Eclipse安装Extjs3.2的spket插件(附插件和Ext文件) 较新的ExtJS的Eclipse插件spket,由于自己找起来也花了不少功夫,所以想和大家共享,减少大家查找时间。
使用FlexiGrid实现Extjs表格的效果使用FlexiGrid实现Extjs表格的效果
extjs2.0.2及eclipse插件spket1.6.23
由于开发WEB需要一个WEB计算器插件,在网上找EXTJS4计算器插件没有一个,找extjs4.0计算器找到一个,但由于代码太多,在主界面上写太多代码,自我感觉以后看起来吃力,思路一下子不好摸到。因此写了这个插件,分享给...
extjs 简单表格呈现extjs 简单表格呈现extjs 简单表格呈现
Extjs 表格增删改例子 附加js表格例子
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
extjs4打印grid插件,官网上的一个例子程序,有需要的人可以下载来看看。
NULL 博文链接:https://yghjoe.iteye.com/blog/1541280
一款基于EXTJS插件风格的表格合并示例,界面不用说了,使用EXT本身的界面风格,很漂亮,EXT功能很强大,这个表格合并功能只是其中一个比较实用的功能,这个例子带给大家,希望通过这个例子你会对EXT有更多的了解。
spket 安装 extjs4.0提示的 插件
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...