Question

Ext.grid.plugin.DragDropView和Ext.tree.plugin.TreeViewDragDropView非常适合在这些组件上实现拖放功能，但是当我拖放项目时我不想要商店修改。我想要自定义函数，比如，当我在网格上放置一个项目时，我不希望修改拖动组件源存储，我也不希望修改拖放组件存储。我希望我的一个功能被调用。
怎么做？
我需要使用DragZone和DropZone吗？

Answer 1

你走在正确的道路上，并寻找合适的区域。您提到的插件正是您为此目的所需的插件，并提供了DragZone和DropZone功能。

我写了一个简单的例子，一起使用这些插件，Fiddle Here。

这里要注意的事项......如果你不想在商店之间移动记录的默认功能，你可能需要在beforeDrop事件中运行你自己的逻辑并调用cancelDrop方法，为了防止默认行为，这在下面的小提琴和代码中得到了证明。

确保两个插件共享相同的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'
                        }
                    }
                }]
            }]
        });
    }
});

使用Extjs 5自定义拖动从树到网格的拖放

1 个答案: