使用 Extjs5 自定义从树拖放到网格

Question

Ext.grid.plugin.DragDropView 和 Ext.tree.plugin.TreeViewDragDropView 非常适合允许对这些组件进行拖放功能，但我不想在拖放项目时进行商店修改。我想要自定义功能，例如，当我将一个项目拖放到我的网格上时，我不希望修改拖动组件源存储，也不希望修改拖放组件存储。我希望调用我的函数。
如何做到这一点？
我需要改用 DragZone 和 DropZone 吗？

Answer 1

您在正确的道路上，在正确的领域寻找。您提到的插件正是您为此目的所需要的，并在其中提供了 DragZone 和 DropZone 功能。

我写了一个结合使用这些插件的简单示例，Fiddle Here。

这里要注意的事情...如果您不想要在商店之间移动记录的默认功能，您可能需要运行在 beforeDrop 事件中使用您自己的逻辑并调用 cancelDrop 方法，以防止默认行为，这在 fiddle 和下面的代码中进行了演示。

确保两个插件共享相同的 ddGroup。

Ext.application({
    name: 'Fiddle',

    launch: function() {

        // create a very simple tree view
        var treeStore = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [{
                    text: "detention",
                    leaf: true
                }, {
                    text: "homework",
                    expanded: true,
                    children: [{
                        text: "book report",
                        leaf: true
                    }, {
                        text: "algebra",
                        leaf: true
                    }]
                }, {
                    text: "buy lottery tickets",
                    leaf: true
                }]
            }
        });

        var gridStore = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            layout: 'fit',
            height: 800,
            width: 800,
            items: [{
                layout: 'border',
                title: "DnD",
                height: '100%',
                items: [{
                    xtype: 'grid',
                    region: 'center',
                    store: gridStore,
                    columns: [{
                        text: 'Name',
                        dataIndex: 'name'
                    }, {
                        text: 'Email',
                        dataIndex: 'email',
                        flex: 1
                    }, {
                        text: 'Phone',
                        dataIndex: 'phone'
                    }],
                    viewConfig: {
                        plugins: {
                            ptype: 'gridviewdragdrop',
                            enableDrag: false,
                            enableDrop: true,
                            ddGroup: 'myDropGroup'
                        },
                        listeners: {
                            beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {
                                // Defer the handling
                                dropHandlers.wait = true;

                                // here you have the record from the treeview and can do anything you like with it.
                                var record = data.records[0];

                                Ext.MessageBox.confirm('Drop', 'Your are about to drop ' + record.get('text') + ', Are you sure?', function(btn) {
                                    if (btn === 'yes') {
                                        dropHandlers.processDrop();
                                    } else {
                                        // IMPORTANT - In this case, we want to cancel the drop as the records aren't compatible
                                        dropHandlers.cancelDrop();
                                    }
                                });
                            }
                        }
                    }
                }, {
                    xtype: 'treepanel',
                    width: '40%',
                    region: 'west',
                    store: treeStore,
                    rootVisible: false,
                    viewConfig: {
                        plugins: {
                            ptype: 'treeviewdragdrop',
                            enableDrop: false,
                            ddGroup: 'myDropGroup'
                        }
                    }
                }]
            }]
        });
    }
});

使用 Extjs5 自定义从树拖放到网格

Custom drag'n'drop from a tree to a grid with Extjs5

drag-and-drop

extjs