2

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

我有两个并排放置的网格，我正在执行从左侧网格（网格 A）到右侧网格（网格 B）的拖放操作。我在Grid B上同时使用BeforeDrop和Drop事件。在将数据从Grid A拖放到Grid 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 事件，除非我点击 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

},
4

1 回答 1

1

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

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

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

dropFunction.wait = true;

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

dropFunction.processDrop();
于 2013-05-22T09:51:16.657 回答