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

Question

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

我有两个并排放置的网格，我正在执行从左侧网格(网格 A)到右侧网格(网格 B)的拖放操作。我在 Grid B 上同时使用了 BeforeDrop 和 Drop 事件。在将数据从 Grid A 拖放到 Grid B 时，我显示了一个自定义 Window，它有一个 combo box 在里面。

使用 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);
    },
});

一拖放，我就得到了窗口，但在控制台中我看到两个事件都已执行:

before 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 windows 暂停 javascript 线程的执行，而 Ext windows 则不会。这解释了您观察到的不同行为。

要在beforedrop 事件中执行异步操作，您必须使用dropHandlers(参见doc)。请注意，Ext4.2 中的 dropHandlers 在 Ext4.1 中记录为 dropFunction，但从我在代码中看到的内容来看，4.1 的文档是错误的，但一切正常如 4.2 文档中所述。

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

dropFunction.wait = true;

稍后，当您完成窗口的业务时(例如，在 ok 按钮的处理程序中):

dropFunction.processDrop();