Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
        }
    }
},
like image 446
RoboKozo Avatar asked Feb 04 '26 14:02

RoboKozo


2 Answers

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
            }
        });
    },
like image 120
Tanel Avatar answered Feb 06 '26 02:02

Tanel


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.

like image 41
atian25 Avatar answered Feb 06 '26 04:02

atian25