CODEWITHSUNDEEP
extjslistener
KishanCS
KishanCS

Reputation: 1377

Ext Js drag drop example using Grid to Grid with plugin listners

ExtJs drag drop example using Grid to Grid How to implement drag and drop plugin so that we can drag data from one grid and can drop it to another and vice versa in ExtJs

enter image description here

Upvotes: 1

Views: 3082

Answers (2)

jose
jose

Reputation: 1562

You have an example in sencha Kitchen Sink - two way drag and drop from one GridPanel to another: http://examples.sencha.com/extjs/5.1.0/examples/kitchensink/#dd-grid-to-grid

Upvotes: 1

KishanCS
KishanCS

Reputation: 1377

The following explained program will work as drag and drop between two grids 

<!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>

Knowledge from : https://www.tutorialspoint.com/extjs/extjs_drag_drop.htm

  • I have created a data model naming StudentDataModel, which has name,age,marks as its attributes .

  • Created a store called myData ie data to be inserted inside grid and a grid store called firstGridStore and secondGridStore

  • implemented a listener and plugin

  • now both [ firstGrid, secondGrid ] inside displayPanel('Ext.Panel')

I have explained it to my best knowledge . I welcome any changed or explanation to improvise the example.

Upvotes: 1

Related Questions