extjs 4 drag-n-drop between 2 grids without plugin?

Question

I am implementing Extjs 4 ( MVC) example given here with rails 3.x.

I have the following structure: in Public dir,

Manager 
-> mainapp
    - controller
        -> Dragdrops.js    
    - model
        -> Dragdrop.js    
    - store
        -> FirstDragdrops.js
        -> SecondDragdrops.js    
    - view
        -dragdrop
            -> DragdropList.js

View ( DragdropList.js ) has a panel that contains 2 grids.

/* -- View - Drag n Drop list grid -- */
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.dd.*'
]);
Ext.define('mainapp.view.dragdrop.DragdropList', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.dragdroplist',
    title : 'Drag Drop List',
    layout: 'hbox',

    initComponent: function() {
        this.items = [
            {
                xtype: 'grid',
                title: 'First Grid',
                id: 'firstgrid',
                store: 'FirstDragdrops',
                flex: 1,    enableDragDrop   : true,
                ddGroup: 'mydd',
                ddText: 'Shift Row',

                columns : [
                    {text: "Item Name",  sortable: true, dataIndex: 'name'},
                    {text: "Quantity",  sortable: true, dataIndex: 'qty'},
                    {text: "Amount", sortable: true, dataIndex: 'amt'}
                ],

                    singleSelect:true,
                    listeners: {
                        beforerowselect: function(sm,i,ke,row){
                        //grid.ddText = title_str(row.data.title, null, row);
                    },
                        selectionchange: function(){
                            alert("Row Selected! " + this.ddText);
                            //grid.ddText(row.data.title, null, row);
                            }
                    }

            },
            {
                xtype: 'grid',
                title: 'Second Grid',
                id: 'secondgrid',
                store: 'SecondDragdrops',
                flex: 2,
                singleSelect: true,
                enableDragDrop   : true,
                stripeRows: true,
                columns : [
                    {text: "Item Name", sortable: true, dataIndex: 'name'},
                    {text: "Quantity", sortable: true, dataIndex: 'qty'},
                    {text: "Amount", sortable: true, dataIndex: 'amt'}
                ]
            }
        ]
        this.callParent(arguments);
    }

});

But I m not able to implement the drag and drop functionality in extjs 4 (WITHOUT PLUGIN).

Any suggestions??

Answer 1

I think this is not perfect way, but it works in my project:

1. Add listener to elements you want to drag or/adn drop:

   listeners: {
         render: initializeDD
   }
   

2. Implement d&d configuretaion method (reordering of components in my case):

   function initializeDD (v) {
       var el = Ext.get(v.getEl().id);
   
       el.on('dblclick', function() {
           var component = Ext.ComponentManager.get(v.getEl().id).getComponent(0);             
           component.focus();
       }, this);
   
       v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
           ddGroup: 'blankAttsReorder',                
           getDragData: function(e) {
               var sourceEl = e.getTarget(v.itemSelector, 10), d;
               if (sourceEl) {
                   d = sourceEl.cloneNode(true);
                   d.id = Ext.id();
                   return v.dragData = {
                       sourceEl: sourceEl,
                       repairXY: Ext.fly(sourceEl).getXY(),
                       ddel: d,
                       originalid: v.getEl().id
                   };
               }
           },
           getRepairXY: function() {
               return this.dragData.repairXY;
           }
       });
   
       v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
           ddGroup: 'blankAttsReorder',
           getTargetFromEvent: function(e) {
               return e.getTarget('.blankbuilder-attribute');
           },
           onNodeOver : function(target, dd, e, data){
                           // specific code there 
               var targetN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(target.id), 0);
               var sourceN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(data.originalid), 0);
               if (targetN!=sourceN) {
                   blank.move(sourceN, targetN);
               }
               return Ext.dd.DropZone.prototype.dropAllowed;
           },
           onNodeDrop : function(target, dd, e, data){
               Ext.ComponentManager.get(target.id).getComponent(0).blur();
           }
       });
   }
   

P. S. Example of drag one type of components to another type of components (contain some project specific code):

    function initializeAttributeDragZone (v) {
        v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
            ddGroup: 'attsToBlank',
            getDragData: function(e) {
                var sourceEl = e.getTarget(v.itemSelector, 10), d;
                if (sourceEl) {
                    d = sourceEl.cloneNode(true);
                    d.id = Ext.id();
                    return v.dragData = {
                        sourceEl: sourceEl,
                        repairXY: Ext.fly(sourceEl).getXY(),
                        ddel: d,
                        attributeData: v.getRecord(sourceEl).data
                    };
                }
            },
            getRepairXY: function() {
                return this.dragData.repairXY;
            }
        });
    }

    // Добавляем возможность дропать атрибуты из списка на бланк
    function initializeBlankDropZone (v) {
        v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
            ddGroup: 'attsToBlank',
            getTargetFromEvent: function(e) {
                return e.getTarget('.blankbuilder-attribute-new');
            },
            onNodeEnter : function(target, dd, e, data){
                Ext.fly(target).addCls('blankbuilder-attribute-new-hover');
            },
            onNodeOut : function(target, dd, e, data){
                Ext.fly(target).removeCls('blankbuilder-attribute-new-hover');
            },
            onNodeOver : function(target, dd, e, data){
                return Ext.dd.DropZone.prototype.dropAllowed;
            },
            onNodeDrop : function(target, dd, e, data){
                // some code
            }
        });
    }