CODEWITHSUNDEEP
javascriptextjsextjs4dom-events
RoboKozo
RoboKozo

Reputation: 5062

Putting the extjs drop event listener in the controller instead of the view

I've been following this example: http://dev.sencha.com/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.prioritycombo'],

    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);
        }
    }
},

Upvotes: 3

Views: 8002

Answers (2)

atian25
atian25

Reputation: 4256

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.

Upvotes: 1

Tanel
Tanel

Reputation: 195

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
            }
        });
    },

Upvotes: 4

Related Questions