I've been following this example: .0.2a/examples/dd/dnd_grid_to_grid.html

So with my version of the app, I'm following the MVC conventions as closely as possible. Like the example above, my view contains the listeners which catch the 'drop' events. This works fine.

But how can I pull out this event handler so that I can keep all my 'code' inside the controller?

My controller:

Ext.define('AM.controller.Cards', {
    extend: 'Ext.app.Controller',

    stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Priorities', 'Sizes'],

    models: ['Card', 'Priority', 'Size'],

    views: ['card.List', 'priority.prioritybo'],

    init: function () {
        this.control({
            'cardlist dataview': {
                itemdblclick: this.editUser
            },
            'cardlist': {
                edit: this.inlineUpdateUser,
                drop: this.dropit
            }
        });
    },

    dropit: function () {
        alert("in");
    },

I was hoping this would work, but the drop event handler only seems to work from within the View.

the view:

viewConfig: {
    plugins: {
        ptype: 'gridviewdragdrop',
        dragGroup: 'firstGridDDGroup',
        dropGroup: 'firstGridDDGroup'
    },
    listeners: {
        drop: function (node, data, dropRec, dropPosition) {
            var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
            alert("Drag from right to left " + data.records[0].get('name') + " " + dropOn);
        }
    }
},

I've been following this example: http://dev.sencha./deploy/ext-4.0.2a/examples/dd/dnd_grid_to_grid.html

So with my version of the app, I'm following the MVC conventions as closely as possible. Like the example above, my view contains the listeners which catch the 'drop' events. This works fine.

But how can I pull out this event handler so that I can keep all my 'code' inside the controller?

My controller:

Ext.define('AM.controller.Cards', {
    extend: 'Ext.app.Controller',

    stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Priorities', 'Sizes'],

    models: ['Card', 'Priority', 'Size'],

    views: ['card.List', 'priority.prioritybo'],

    init: function () {
        this.control({
            'cardlist dataview': {
                itemdblclick: this.editUser
            },
            'cardlist': {
                edit: this.inlineUpdateUser,
                drop: this.dropit
            }
        });
    },

    dropit: function () {
        alert("in");
    },

I was hoping this would work, but the drop event handler only seems to work from within the View.

the view:

viewConfig: {
    plugins: {
        ptype: 'gridviewdragdrop',
        dragGroup: 'firstGridDDGroup',
        dropGroup: 'firstGridDDGroup'
    },
    listeners: {
        drop: function (node, data, dropRec, dropPosition) {
            var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
            alert("Drag from right to left " + data.records[0].get('name') + " " + dropOn);
        }
    }
},

• javascript
• extjs
• extjs4
• dom-events

2 Answers 2

If drop event works in dataview put in into "cardList dataview" section

init: function () {
        this.control({
            'cardlist dataview': {
                itemdblclick: this.editUser,
                drop: this.dropit
            },
            'cardlist': {
                edit: this.inlineUpdateUser
            }
        });
    },

add below to controller's launch fn or grid's afterrender listener

var grid = Ext.ComponentQuery.query('cardlist');
grid.view.on('drop',this.onDrop,this)

or you can relayEvent view's drop event to grid.