在网格之间执行拖放时，在显示窗口时停止处理 DragDrop 事件

Question

从过去几个月开始，我就开始研究它。 我在处理拖放事件时遇到问题。

我有两个并排放置的网格，我正在执行从左侧网格（网格 A）到右侧网格（网格 B）的拖放操作。我在 Grid B 上同时使用 BeforeDrop 和 Drop 事件。在将数据从 Grid A 拖放到 Grid B 时，我正在显示一个具有 组合框 的自定义 Window > 在里面。

使用 Select 事件在组合框中显示窗口和选择值在 BeforeDrop 事件中完成并重新加载 Grid B 的 存储在 Drop 事件中完成。

问题是当我将数据从网格 A 拖放到网格 B 时，BeforeDrop 事件会在弹出窗口的位置触发，同时在选择组合框数据之前， Drop 事件也会在后台重新加载 Grid B 的存储时触发。

我希望在我在组合框中选择一个项目后触发 Drop 事件。一旦显示窗口，有没有办法停止触发过程？

非常感谢任何帮助..

这里有一些代码：

带有两个网格以及拖放事件的面板

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.panel.Panel',
    frame: false,
    height: 708,
    width: 1150,
    layout: {
        type: 'border'
    },
    title: 'MyApp',
    initComponent: function () {
        var me = this;
        var GridADragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
            ptype: 'gridviewdragdrop',
            dragGroup: 'GridADDGroup',
            dropGroup: ''
        });
        var GridBDragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
            ptype: 'gridviewdragdrop',
            dragGroup: 'GridADDGroup',
            dropGroup: 'GridADDGroup'
        });
        Ext.applyIf(me, {
            items: [{
                xtype: 'grid',
                id: 'gridb',
                title: 'Grid B',
                store: 'GridBStore',
                viewConfig: {
                    id: 'Bview',
                    plugins: [GridBDragDrop],
                    /*Both Events have been used for Grid B*/
                    listeners: {
                        beforedrop: {
                            fn: me.onBeforeDrop,
                            scope: me
                        },
                        drop: {
                            fn: me.onDrop,
                            scope: me
                        }
                    }
                },
                columns: [{
                    xtype: 'numbercolumn',
                    dataIndex: 'id',
                    text: 'ID'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name'
                }]
            }, {
                xtype: 'grid',
                id: 'grida',
                title: 'Grid A',
                store: 'GridAStore',
                viewConfig: {
                    id: 'Aview',
                    plugins: [GridADragDrop]
                },
                columns: [{
                    xtype: 'numbercolumn',
                    dataIndex: 'id',
                    text: 'ID'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name'
                }]
            }]
        });

        me.callParent(arguments);
    },
    onBeforeDrop: function (node, data, overModel, dropPosition, dropFunction, options) {

        console.log("The before drop event is triggered!!");
        // Creating the window
        var window = Ext.create('MyApp.Window');
        // Getting the combo box object from the window object 
        var combobox = window.items.items[0];
        // Adding 'select' listener to the combo box
        combobox.on('select', function (combo, records, options) {
            // I do some stuff here
            //...   
            // Once finished I destroy window
            window.destroy();
        });
        // Display the window on item drop
        window.show();
    },
    onDrop: function (node, data, overModel, dropPosition, options) {

        console.log("The drop event is triggered!!");

        var GridB = Ext.getCmp('gridb'); // Grid B
        var GridBStore = GridB.getStore(); // Grid B store

        //Reload the GridB store once the item has been dropped
        GridBStore.reload();
    }
});

我的自定义窗口：

Ext.define('MyApp.Window', {
    extend: 'Ext.window.Window',
    height: 82,
    hidden: false,
    id: 'droptaskwindow',
    width: 171,
    layout: {
        type: 'absolute'
    },
    title: 'Create Task',
    modal: true,
    expandOnShow: false,
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                xtype: 'combobox',
                x: 10,
                y: 10,
                id: 'combodroptask',
                width: 130,
                fieldLabel: 'ID',
                labelPad: 1,
                labelWidth: 45,
                allowBlank: false,
                editable: false,
                displayField: 'Name',
            }]
        });
        me.callParent(arguments);
    },
});

只要我拖放，我就会得到窗口，但在控制台中我看到两个事件都已执行：

触发前删除事件！！
触发drop事件！！

注意： 我注意到一件事，在显示简单的警报消息时，只有 BEFORE 事件被触发，而不是 DROP 事件，除非我点击 OK。这正是我希望它在显示窗口时工作的方式。

警报消息有效：

onBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {

    console.log("The before drop event is triggered!!");
    alert("Dropping..");// IT WORKS!! It Does not allow DROP event to execute..unless OK is clicked
    Ext.Msg.alert('Status', 'Dropping..'); //This doesn't work..same as my window

}, 

Answer 1

Alert 窗口会暂停 javascript 线程的执行，而 Ext 窗口则不会。这解释了您观察到的不同行为。

要在beforedrop 事件中执行异步操作，您必须使用dropHandlers（请参阅doc）。请注意，Ext4.2 中的 dropHandlers 在 Ext4.1 中记录为 dropFunction，但从我在代码中看到的情况来看，4.1 的文档是错误的，并且按照 4.2 文档中的描述工作。

因此，在您的 beforedrop 处理程序中，您应该添加（使用您当前的参数名称）：

dropFunction.wait = true;

然后，当您完成窗口的业务时（例如，在确定按钮的处理程序中）：

dropFunction.processDrop();