EXTjs 4 figuring out origin and destination for a drag/drop plugin events

Question

I'm teaching myself EXTjs 4 by building a very simple application.

In EXTjs 4 I've got 4 grids that each have the Grid to Grid drag/drop plugin. (Example functionality here: http://dev.sencha.com/deploy/ext-4.0.2a/examples/dd/dnd_grid_to_grid.html )

In my view I have the plugin defined as such:

viewConfig: {
    plugins: {
        ptype: 'gridviewdragdrop',
        dragGroup: 'ddzone',
        dropGroup: 'ddzone'
    }
},

Now in the example, they have different dragGroups and dropGroups, but because I want the items to drag/dropped between each other fluidly, I gave the groups the same name.

Shows 3 of the 4 grids and how the items could be moved from grid to grid

The way the information gets originally populated into the 4 different lists is by looking at an the state_id in the db. All state_ids 1 go into the backlog store, 2 In Progress store, etc, etc.

So what I need to do when the item is drag/dropped, is remove it from its old store and put it into the new store (updating the state_id at the same time, so I can sync it with the db afterwards).

My only problem is figuring out the origin grid and destination grid of the row that was moved over.

Thank you!

PS. If you're curious this is what my drop event handler looks like at the moment:

dropit: function (node, data, dropRec, dropPosition) {
    console.log('this');
    console.log(this);
    console.log('node');
    console.log(node);
    console.log('data');
    console.log(data);
    console.log('droprec');
    console.log(dropRec);
    console.log('dropPosition');
    console.log(dropPosition);
},

As you can see, I haven't gotten very far ^_^

Actually, I did some digging around with the Ext.ComponentManager.all and it seems like the things get moved to the correct store. I really only need to update the state_id field of the stores to the correct value. — RoboKozo

RoboKozo RoboKozo · Accepted Answer · 2011-07-07T23:52:22

Alright, I figured out a way of doing it that seems to be less then ideal... but it works so until someone provides a better solution I'll be stuck doing it like this:

dropit: function (node, data, dropRec, dropPosition) {
    if (node.dragData.records[0].store.$className == "AM.store.BacklogCards")
    {
        data.records[0].set('state_id', 1);
        this.getBacklogCardsStore().sync();
    }
    else if (node.dragData.records[0].store.$className == "AM.store.InprogressCards")
    {
        data.records[0].set('state_id', 2);
        this.getInprogressCardsStore().sync();
    }
    else if (node.dragData.records[0].store.$className == "AM.store.ReviewCards")
    {
        data.records[0].set('state_id', 3);
        this.getReviewCardsStore().sync();
    }
    else
    {
        data.records[0].set('state_id', 4);
        this.getDoneCardsStore().sync();
    }

I noticed that node.dragData.records[0].store.$className points to defined store that is what the grid bases itself on.

Using the data.records[0].set('state_id', 1); sets the state_id for the row that was moved over and then finally, I call the sync function to update the db with the new row information.

EXTjs 4 figuring out origin and destination for a drag/drop plugin events

1 Answers