如何限制网格拖放到ext js 4中的面板?
我正在使用 Ext js 4 作为我的一个应用程序。
我在面板上有一个网格,它看起来像这样:
Ext.define('Table' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.Symbol',
title:'Table',
ddGroup : 'GridDDGroup',
hideHeaders : true,
rowLines: false,
enableDragDrop : true,
floating:true,
columns: [/***details***/],
draggable : true,
loadMask : true,
minHeight : 100,
minWidth : 170
});
我已经在面板中实现了拖放网格。 DropZone 如下所示:
initializeDropZone: function(g) {
g.dropZone = new Ext.dd.DropZone(g.getEl(), {
getTargetFromEvent : function(e) {
return e.getTarget(Ext.get('target'));
},
onNodeEnter : function(target, dd, e, data) {
Ext.fly(target).addCls('target-hover');
},
onNodeOut : function(target, dd, e, data) {
Ext.fly(target).removeCls('target-hover');
},
onNodeOver : function(target, dd, e, data) {
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data) {
//some logic
});
}
我正在关注MVC架构,所有的听众都在这里。一切正常。
每当我拖动网格并将其放在同一个面板中时,我写的逻辑就会正确执行。
但是当我将网格拖放到面板外时,执行不会进入dropzone并且没有调用任何方法,因此不会执行任何逻辑。但网格已退出小组。
我想限制网格拖动到面板。否则,如果它被丢弃在面板外的任何地方,网格应该回显到之前的位置。
有人可以帮助我吗?