Question

我在使用ExtJS4时遇到问题。

我的应用程序有一个树，其中包含代表员工的字符串在这棵树里面，拖放效果很好现在我正在尝试建立一个可以拖动员工删除的面板。

所以我让ExtJS创建一个新的Ext.dd.DDTarget，根据需要定义dragzone（这是可行的部分，因为它被认为是一个有效的删除目标）...但当我放弃员工时，什么都没发生。我只是无法弄清楚要使用哪个监听器以及准确使用它...

我真的不知道，我应该用这个问题发布我的代码的哪一部分来支持你支持我（：D）...所以我只发帖我想我应该发布和编辑这篇文章如果缺少的东西......： - ）

所以这是我的DDTarget：

 var trashDDTarget = Ext.create('Ext.dd.DDTarget', 'trashTarget', 'trashDrag');

其中'trashTarget'是面板（如下所示），'trashDrag'是dragGroup的名称......

targetPanel：

  var trashPanel = Ext.create('Ext.panel.Panel', {
title: 'Trash!',
id: 'trashTarget',
width: 400,
height: 150,
renderTo: 'trash',
bodyStyle: 'background-image: url(/images/trash_can.png) !important'
});

这是我解决此问题的一个想法：

  Ext.override(Ext.dd.DDTarget, {
onDragDrop  : function(evtObj, targetElId) {
  console.log(evtObj);
},
onInvalidDrop: function(evt) {
  console.log(evt);
}
});

覆盖一些听众;但它不起作用。
我希望我没有混淆你，也许有人可以帮助我......： - ）

提前致谢
gilaras

---------------------------- UPDATE：

我将面板更改为网格面板...
当我将一个项目拖到它上面时，它会从树上消失...
...但它似乎没有触发文档中指定的任何事件...
我的新面板看起来像这样：

 var trashPanel = Ext.create('Ext.grid.Panel', {
title: 'Trash!',
id: 'trashTarget',
width: 400,
viewConfig: {
  plugins: {
    ptype: 'gridviewdragdrop',
    dropGroup: 'trashDrag',
    dragGroup: 'trashDrag',
    dragText: 'In den Papierkorb ziehen, um zu löschen...'
  }
},
height: 150,
renderTo: 'trash',
columns:[
  {
    hidden: true
  }
],

bodyStyle: 'background-image: url(/images/trash_can.png) !important'
});

但不知怎的，这也不起作用......

Answer 1

好吧，我想我找到了解决方案;-)
可能不是最好的，但它足以满足我的需要：D
我会在这里发布我的解决方案，所以也许有一天，有人在这个主题上寻求帮助可能会找到它： - ）

我的问题（以及我对它的想法中的错误点）是，我不知道在哪里捕捉事件...或者至少现在它可以工作，当在 viewConfig中捕获它时的gridpanel :-)

所以这是我的新小组：

var trashPanel = Ext.create('Ext.grid.Panel', {
title: 'Trash!',
id: 'trashTarget',
width: 400,
viewConfig: {
  plugins: {
    ptype: 'gridviewdragdrop',
    dropGroup: 'trashDrag',
    dragGroup: 'trashDrag',
    dragText: 'In den Papierkorb ziehen, um zu löschen...'
  },
  listeners: {
    drop: function(node, data, overModel, dropPosition) {
      console.log('Mitarbeiter mit ID ' + data.records[0].internalId + ' gedropt!');
      var antwort = function(btn){
        if(btn.indexOf('no') != -1){
          treeStore.load();
        } else {
          Ext.Ajax.request({
              url: '/app/loeschenPage',
              params:
              {
                id: data.records[0].internalId
              },
              method: 'GET',
              success: function() {
                Ext.MessageBox.alert("Und tschüss...", "Mitarbeiter erfolgreich aus der Datenbank gelöscht.");
                treeStore.load();
              }
            });
        }
      };
      Ext.MessageBox.confirm('Wirklich löschen?', 'Soll der Mitarbeiter WIRKLICH FUER IMMER geloescht werden? Das ist eine sehr lange Zeit...', antwort);

    }
  }
},
height: 150,
renderTo: 'trash',
columns:[
  {
    hidden: true
  }
],

bodyStyle: 'background-image: url(/images/trash_can.png) !important'
});

非常感谢，写下我的问题确实帮助我以不同的方式思考它： - ）

Answer 2

要防止从树中删除数据，您应该在viewConfig中设置属性：

viewConfig:{ copy: true; }

ExtJS4：从树拖到面板

2 个答案: