Question

我已经开始研究过去几个月了。我有一个处理拖拉的问题放弃事件。

我有两个并排放置的网格，我正在执行拖动和放大从左侧网格（网格A）到右侧网格（网格B）的操作。我在网格B 上同时使用 BeforeDrop 和删除事件。在从网格A 到网格B 的数据拖放中，我正在显示一个带有组合框的自定义 Window 在其中。

显示窗口并使用选择事件在组合框中选择值在 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事件，除非我单击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

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

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

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

dropFunction.wait = true;

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

dropFunction.processDrop();

在执行拖放操作时停止显示窗口时DragDrop事件的处理网格之间的下降

1 个答案: