Перетаскивание между сеткой и деревом в ExtJS 6.6 Classic - PullRequest
Новая
       19

Перетаскивание между сеткой и деревом в ExtJS 6.6 Classic

0 голосов
/ 08 декабря 2018

Я хочу реализовать функцию перетаскивания между панелью дерева и панелью сетки.У них обоих есть свое хранилище и модель, и они получают свои данные из API.

Цель состоит в том, чтобы перетащить строку из таблицы и поместить ее на один из узлов дерева. Это действие должно вызвать прослушиватель события onDrop, чтобы я мог вызвать API и выполнить необходимые действия на бэкэнде.

Я не хочу добавлять какой-либо элемент в дерево, мне просто нужен обработчик события отбрасывания, который запускается при отбрасывании.

Я пытался использовать плагин Drag and 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;
        },

      }
    });

Спасибо, Шон

...