暂停在执行拖放时显示窗口的拖放事件的处理;在网格之间下降

我从几个月前就开始做了。我有一个问题处理拖拽&删除事件。

我有两个网格并排放置，我正在执行拖动&从左网格(网格A)到右网格(网格B)的drop操作。我在网格B上使用BeforeDrop和 drop 事件。在拖放数据从网格A到网格B，我显示一个自定义窗口有一个组合框在它。

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

问题是当我从网格A拖放数据到网格B时，BeforeDrop事件被触发，在窗口弹出和同时选择组合框数据之前， drop 事件也被触发重新加载网格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。当我的窗口显示时，这就是我想要的工作方式。

Alert Msg works:

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
},