Extjs4 - Как обновить столбец записи после перетаскивания по сетке?

Question

Я пытаюсь создать своеобразное меню перетаскивания, в котором вы можете перетаскивать элементы из меню и отбрасывать их в свой заказ.

Что я хочу сделать, так это чтобы мои записи сетки заказов обновлялись, если вы перетаскиваете повторяющийся элемент, скажем, если вы добавили гамбургер в свой заказ, а затем добавили еще один, количество гамбургера первая добавленная строка гамбургера должна обновиться до «2», я не хочу добавлять повторяющийся элемент.

Любая помощь с этим была бы очень признательна.

Адрес fiddle.

А вот код:

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

Попробуйте использовать этот обработчик событий beforedrop для второй сетки. Edited скрипки здесь: 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; 
},