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

Posted 2023-02-22

技术标签:

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

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

【问题讨论】：

【参考方案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

【讨论】：

以上是关于Extjs 拖放示例使用 Grid 到 Grid 与插件侦听器的主要内容，如果未能解决你的问题，请参考以下文章

如何将复选框列添加到 Extjs Grid