Extjs4 - How to update record column after drag and drop on a grid?

Question

I'm trying to build a sort of drag an drop order menu, where you can drag items from a menu and drop them to your order.

What I want to accomplish is to have my order grid records to have its quantity updated if you drag a repeated element, say, if you added a hamburger to your order and later on add another one, the hamburger quantity of the first hamburger row added should update to '2', I don't want to add a repeated element.

Any help with this would be very appreciated.

Here is a fiddle.

And here is the code:

Ext.define('Example.model.Simple', {
    extend: 'Ext.data.Model',
    fields: ['quantity', 'name']
});

Ext.define('Example.view.GridToGrid', {
    extend: 'Ext.window.Window',

    requires: [
        'Ext.grid.*',
        'Ext.layout.container.HBox',
        'Example.model.Simple'
    ],    
    xtype: 'dd-grid-to-grid',


    width: 650,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch',
        padding: 5
    },

    myData: [
        { quantity: 1, name : 'Pizza' },
        { quantity: 1, name : 'Hamburger' },
        { quantity: 1, name : 'Cheese-burger' },
        { quantity: 1, name : 'Hot Dog' },
        { quantity: 1, name : 'Soda' },
        { quantity: 1, name : 'Iced Tea' },
        { quantity: 1, name : 'Coffee' },
        { quantity: 1, name : 'Sencha Tea' },
        { quantity: 1, name : 'Mineral Water' }
    ],

    initComponent: function(){
        var group1 = this.id + 'group1',
            group2 = this.id + 'group2',
            columns = [{
                text: 'Quantity', 
                width: 80,                
                sortable: true, 
                dataIndex: 'quantity'
            }, {
                text: 'Name', 
                flex: 1, 
                sortable: true, 
                dataIndex: 'name'
            }];

        this.items = [{
            itemId: 'grid1',
            flex: 1,
            xtype: 'grid',
            multiSelect: true,
                viewConfig: {
                    copy:true,
                    plugins: {
                        ptype: 'gridviewdragdrop',
                        dragGroup: group1,
                        dropGroup: group2
                    },
                    listeners: {
                        drop: function(node, data, dropRec, dropPosition) {
                    }
                }
            },
            store: new Ext.data.Store({
                model: Example.model.Simple,
                data: this.myData
            }),
            columns: columns,
            stripeRows: true,
            title: 'Menu',
            tools: [{
                type: 'refresh',
                tooltip: 'Reset both grids',
                scope: this,
                handler: this.onResetClick
            }],
            margins: '0 5 0 0'
        }, {
            itemId: 'grid2',
            flex: 1,
            xtype: 'grid',
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: group2,
                    dropGroup: group1
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {

                    }
                }
            },
            store: new Ext.data.Store({
                model: Example.model.Simple
            }),
            columns: columns,
            stripeRows: true,
            title: 'Order'
        }];

        this.callParent();
    },

    onResetClick: function(){
        //refresh source grid
        this.down('#grid1').getStore().loadData(this.myData);

        //purge destination grid
        this.down('#grid2').getStore().removeAll();
    }
});

Ext.onReady(function(){
    Ext.create('Example.view.GridToGrid').show();
});

Answer 1

Try to use this beforedrop event handler for second grid. Edited fiddle is here: http://jsfiddle.net/vLzUN/3/

beforedrop: function ( node, data, overModel, dropPosition, dropHandlers ) {
  var grid = Ext.ComponentQuery.query('#grid2')[0];
  var store = grid.store;
  var recordsToDrop = [];

  for(var i = 0; i < data.records.length; i++) {
    var record = data.records[i];
    var name = record.get('name');
    var index = store.find('name', name, false, true, true);

    if (index !== -1) {
      var orderRecord = store.getAt(index);
      orderRecord.set('quantity', orderRecord.get('quantity') + 1);
      // remove record dirty flag
      orderRecord.commit();
    } else {
      recordsToDrop.push(record); 
    }
  }  
  data.records = recordsToDrop;
},