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事件处理程序用于第二个网格。编辑小提琴在这里：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;
},

Extjs4 - 如何在拖放网格后更新记录列？

1 个答案: