Question

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

Answer 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')

据我所知，我已经解释过了。我欢迎任何改变或解释来即兴表达这个例子。

Answer 2

你在sencha Kitchen Sink中有一个例子 - 双向拖放从一个GridPanel到另一个：http://examples.sencha.com/extjs/5.1.0/examples/kitchensink/#dd-grid-to-grid

Ext Js拖放示例使用Grid to Grid和插件列表器

2 个答案: