Extjs 拖放示例使用 Grid 到 Grid 与插件侦听器答案

【问题标题】：Ext Js drag drop example using Grid to Grid with plugin listnersExtjs 拖放示例使用 Grid 到 Grid 与插件侦听器
【发布时间】：2017-07-17 17:46:41
【问题描述】：

ExtJs 使用 Grid 到 Grid 的拖放示例 ExtJs中如何实现拖放插件，以便我们可以将数据从一个网格拖放到另一个网格，反之亦然

【问题讨论】：

标签： extjs listener

【解决方案1】：

以下解释的程序将作为两个网格之间的拖放操作

<!DOCTYPE html>
<html>
<head>
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
    rel="stylesheet" />
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
    Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);

    // Creation of data model
    Ext.define('StudentDataModel', {
        extend : 'Ext.data.Model',
        fields : [ {
            name : 'name',//Name of the column
            mapping : 'name'//Name to map the columns
        },

        {
            name : 'age',
            mapping : 'age'
        }, {
            name : 'marks',
            mapping : 'marks'
        } ]
    });

    Ext.onReady(function() {
        // Store data
        var myData = [ {
            name : "Smith",
            age : "20",
            marks : "90"
        }, {
            name : "Alen",
            age : "18",
            marks : "95"
        }, {
            name : "Mike",
            age : "20",
            marks : "68"
        }, {
            name : "Jon",
            age : "21",
            marks : "86"
        }, {
            name : "Keven",
            age : "22",
            marks : "57"
        } ];

        // Creation of first grid store
        var firstGridStore = Ext.create('Ext.data.Store', {
            model : 'StudentDataModel',
            data : myData
        });

        // Creation of first grid
        var firstGrid = Ext.create('Ext.grid.Panel', {
            multiSelect : true,
            viewConfig : {
                plugins : {
                    ptype : 'gridviewdragdrop',
                    dragGroup : 'firstGridDDGroup',
                    dropGroup : 'secondGridDDGroup'
                },
                listeners : {
                    drop : function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' '
                                + dropRec.get('name') : ' on empty view';
                    }
                }
            },
            store : firstGridStore,
            columns : [ {
                header : "Student Name",
                dataIndex : 'name',
                id : 'name',
                flex : 1,
                sortable : true
            }, {
                header : "Age",
                dataIndex : 'age',
                flex : .5,
                sortable : true
            }, {
                header : "Marks",
                dataIndex : 'marks',
                flex : .5,
                sortable : true
            } ],
            stripeRows : true,
            title : 'First Grid',
            margins : '0 2 0 0'
        });
        // Creation of second grid store
        var secondGridStore = Ext.create('Ext.data.Store', {
            model : 'StudentDataModel'
        });
        // Creation of second grid
        var secondGrid = Ext.create('Ext.grid.Panel', {
            viewConfig : {
                plugins : {
                    ptype : 'gridviewdragdrop',
                    dragGroup : 'secondGridDDGroup',
                    dropGroup : 'firstGridDDGroup'
                },
                listeners : {
                    drop : function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' '
                                + dropRec.get('name') : ' on empty view';
                    }
                }
            },
            store : secondGridStore,
            columns : [ {
                header : "Student Name",
                dataIndex : 'name',
                id : 'name',
                flex : 1,
                sortable : true
            }, {
                header : "Age",
                dataIndex : 'age',
                flex : .5,
                sortable : true
            }, {
                header : "Marks",
                dataIndex : 'marks',
                flex : .5,
                sortable : true
            } ],
            stripeRows : true,
            title : 'Second Grid',
            margins : '0 0 0 3'
        });
        // Creation of a panel to show both the grids.
        var displayPanel = Ext.create('Ext.Panel', {
            width : 600,
            height : 200,
            layout : {
                type : 'hbox',
                align : 'stretch',
                padding : 5
            },
            renderTo : 'panel',
            defaults : {
                flex : 1
            },
            items : [ firstGrid, secondGrid ],
            dockedItems : {
                xtype : 'toolbar',
                dock : 'bottom',
                items : [ '->', {
                    text : 'Reset both grids',
                    handler : function() {
                        firstGridStore.loadData(myData);
                        secondGridStore.removeAll();
                    }
                } ]
            }
        });
    });
</script>
</head>
<body>
    <div id="panel"></div>
</body>
</html>

知识来自： https://www.tutorialspoint.com/extjs/extjs_drag_drop.htm

我创建了一个名为StudentDataModel 的数据模型，它有 name,age,marks 作为它的属性。
创建了一个名为 myData 的存储，即要插入到网格中的数据和一个名为 firstGridStore 和 secondGridStore 的网格存储
实现了listener and plugin
现在都在[ firstGrid, secondGrid ]里面 displayPanel('Ext.Panel')

我已尽我所知解释了它。我欢迎任何更改或解释即兴示例。

【讨论】：

这段代码给了我更好的解释和理解能力，而且通俗易懂

【解决方案2】：

您在 sencha Kitchen Sink 中有一个示例 - 从一个 GridPanel 到另一个 GridPanel 的两种拖放方式：http://examples.sencha.com/extjs/5.1.0/examples/kitchensink/#dd-grid-to-grid

【讨论】：