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

Share Improve this question Follow edited Oct 29, 2019 at 22:26 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 6, 2011 at 20:49 RoboKozoRoboKozo 5,06255 gold badges5252 silver badges8080 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.