如何限制网格拖放到ext js 4中的面板?

时间:2016-06-14 10:57:00

标签: javascript extjs drag-and-drop extjs4 extjs4.1

如何限制网格拖放到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并且没有调用任何方法,因此不会执行任何逻辑。但网格已退出小组。

我想限制网格拖动到面板。否则,如果它被丢弃在面板外的任何地方,网格应该回显到之前的位置。

有人可以帮助我吗?

0 个答案:

没有答案