从数据视图拖放到 extjs4 的面板中

Question

我正在创建一个拖放操作，其中我有一个带有一组图像的数据视图。然后我有一个面板，我想让用户从数据视图中删除图像。使用 sencha 示例中的示例，我能够得到类似的东西。但我得到一个错误

Uncaught TypeError: Cannot set property 'afterValidDrop' of undefined 

这就是我的面板中的内容。

Ext.define('Memegen.view.MemeBuildArea',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.memebuildarea',
    listeners: {
        render: initializeMemeDropZone
    },
    cls: 'meme-target',
});

function initializeMemeDropZone(targetPanel) {  
    targetPanel.dropTarget = Ext.create('Ext.dd.DropTarget', targetPanel.el);
    targetPanel.dropTarget.notifyDrop = function(source, evt, data) {
    if(typeof console != "undefined")
      console.log("notifyDrop:" + source.id);
    var droppedPanel = Ext.getCmp(source.id);

    droppedPanel.dd.afterValidDrop = function() {
      targetPanel.add(droppedPanel.cloneConfig({
        draggable: false,
        title: "Can't Drag This Panel."
      }));
      droppedPanel.destroy();
    };
    return true;
}

  targetPanel.dropTarget.notifyEnter = function(source, evt, data) {
    if(typeof console != "undefined")
      console.log("notifyEnter:" + source.id);
    return this.callParent(Array.prototype.slice.call(arguments));
  };

  targetPanel.dropTarget.notifyOut = function(source, evt, data) {
    if(typeof console != "undefined")
      console.log("notifyOut:" + source.id);
    return this.callParent(Array.prototype.slice.call(arguments));
  };

  targetPanel.dropTarget.notifyOver = function(source, evt, data) {
    if(typeof console != "undefined")
      console.log("notifyOver:" + source.id);
    return this.callParent(Array.prototype.slice.call(arguments));
  };

}

关于这里出了什么问题的任何想法？

Answer 1

为了定义 dd 属性，您的面板需要是可拖动的（请参阅 Ext.panel.Panel 的 API 文档，可拖动配置）。