在ExtJS 6.6 Classic中的网格和树之间拖放

Question

我想在树面板和网格面板之间实现拖放功能。他们两个都有自己的商店和模型，他们从API获取数据。

目标是从网格中拖动一行并将其放在树节点之一上，此操作应触发事件监听器onDrop，以便我可以调用API并在后端执行所需的操作。

我不想在树上添加任何元素，我只需要在drop上触发drop事件处理程序即可。

我尝试使用拖放插件，但是由于某种原因，我收到此错误。

Ext.data.Model.constructor（）：错误的模型构造函数参数2-“会话”不是会话

这是表格的代码。

Ext.define("TutorialApp.view.mailbox.MsgDataGrid", {
  extend: "Ext.grid.Panel",
  xtype: "msgdatagrid",

  cls: "email-data-grid",

  controller: "msgdatagrid",

  requires: ["Ext.toolbar.Paging", "Ext.ux.ProgressBarPager"],

  //height: 1024,
  scrollable: true,

  viewConfig: {
    plugins: {
      ptype: "gridviewdragdrop",
      ddGroup: "EmailDragZone",
      enableDrop: false
    },

    getRowClass: function(record, rowIndex, rowParams, store) {
      return "emailRecord";
    }
  },
  enableDragDrop: true,
  multiSelect: true,

  //store: Ext.create("TutorialApp.view.mailbox.MsgDataStore"),
  selModel: {
    type: "checkboxmodel"
  },

  bind: {
    store: "TutorialApp.view.mailbox.MsgDataStore"
  },

  listeners: {
    cellclick: "onGridCellItemClick"
  },

  columns: {
    defaults: {
      align: "left",
      menuDisabled: false
    },
    items: [
      {
        header: "From",
        dataIndex: "sender",
        flex: 0.5
      },
      {
        header: "Subject",
        dataIndex: "subject",
        flex: 1
      },
      {
        header: "Sent",
        dataIndex: "created",
        width: 200
      }
    ]
  },
  bbar: {
    xtype: "pagingtoolbar",
    displayInfo: true,
    plugins: {
      "ux-progressbarpager": true
    },
    listeners: {
      beforechange: function(view, currentPage) {
        //console.log("nbMessages", view.up().nbMessages);
        let store = view.getStore();
        let storeProxy = store.getModel().getProxy();
        storeProxy.setExtraParams({
          offset: currentPage * 25,
          limit: 25,
          total: view.nbMessages
        });
      }
    }
  }
});


Ext.define("TutorialApp.view.mailbox.Mailboxes", {
  extend: "Ext.tree.Panel",
  xtype: "mailboxes",
  name: "mailboxesTreePanel",

  store: Ext.create("TutorialApp.view.mailbox.MflDataStore"),

  controller: "mailboxes",

  params: {},

  useArrows: false,
  align: "stretch",
  rootVisible: false,
  hideHeaders: true,
  viewConfig: {
    plugins: {
      ptype: "treeviewdragdrop",
      ddGroup: "EmailDragZone",
      //dragGroup: "EmailDragZone",
      enableDrag: false,
      enableDrop: true
      // allowContainerDrops: true,
      // forceFit: false
    }
  },
  columns: [
    {
      xtype: "treecolumn",
      dataIndex: "foldername",
      flex: 1
    }
  ],
  listeners: {
    beforedrop: function(node, data, dropRec, dropPosition) {
      console.log("Before Drop!");
      console.log(node);
      console.log(data);
      console.log(dropRec);
      console.log(dropPosition);
      return true;
    },

    drop: function(node, data, dropRec, dropPosition) {
      console.log("Drop!");
      //dropRec = "";
      return true;
    },

    onNodeDrop: function(targetNode, dragZone, e, data) {
      console.log("dropped!");
    }
  }
});

这是树面板的代码。

Ext.define("TutorialApp.view.mailbox.Mailboxes", {
      extend: "Ext.tree.Panel",
      xtype: "mailboxes",
      name: "mailboxesTreePanel",

      store: Ext.create("TutorialApp.view.mailbox.MflDataStore"),

      controller: "mailboxes",

      params: {},

      useArrows: false,
      align: "stretch",
      rootVisible: false,
      hideHeaders: true,
      viewConfig: {
        plugins: {
          ptype: "treeviewdragdrop",
          ddGroup: "EmailDragZone",
          enableDrag: false,
          enableDrop: true
        }
      },
      columns: [
        {
          xtype: "treecolumn",
          dataIndex: "foldername",
          flex: 1
        }
      ],
      listeners: {
        beforedrop: function(node, data, dropRec, dropPosition) {
          console.log("Before Drop!");
          return true;
        },

        drop: function(node, data, dropRec, dropPosition) {
          console.log("Drop!");
          return true;
        },

      }
    });

谢谢 肖恩