Hello,

I currently have the following code:

Grid 1

Code:
Ext.define('chefRequiredCookbooksGridPanel', {
    extend: 'Ext.grid.Panel',
    title: 'Required Cookbooks',
    id: 'chefRequiredCookbooksGrid',
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop'
        },
        getRowClass: function(record, index) {
            if(REQ_COOKBOOK_NAMES.includes(record['data']['cookbookName'])) {
                // Sets Grid Row to 'disabled' color. Rule in CSS folder.
                return 'requiredCookbook';
            } 
        },
        listeners: {
          beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts) {
              if(REQ_COOKBOOK_NAMES.includes(record['data']['cookbookName'])) {
                  // Disables row from being dragged.
                  return false;
              }
          }
      }
    },
    columns: [{
        text: 'Cookbook Name',
        dataIndex: 'cookbookName',
        flex: 2,
        resizable: false
    }, {
        text: 'Version',
        dataIndex: 'versionNumber',
        flex: 1,
        resizable: false
    }],
    multiselect: false,


    initComponent: function() {
        var me = this;
        var chefRCS = Ext.create('chefRequiredCookbooksStore');


        Ext.applyIf(me, {
            store: chefRCS,          
        }); 


        me.callParent(arguments);
    }
});
Grid 2

Code:
// Provide Live Search capability to quickly locate Optional Cookbooks
Ext.require(['Ext.ux.LiveSearchGridPanel']);


Ext.define('chefOptionalCookbooksGridPanel', {
    extend: 'Ext.ux.LiveSearchGridPanel',
    title: 'Optional Cookbooks',
    id: 'chefOptionalCookbooksGrid',
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop'
        }
    },
    columns: [{
        text: 'Cookbook Name',
        dataIndex: 'cookbookName',
        flex: 2,
        resizable: false
    }, {
        text: 'Version',
        dataIndex: 'versionNumber',
        flex: 1,
        resizable: false
    }],
    multiselect: false,


    initComponent: function() {
        var me = this;
        var chefOCS = Ext.create('chefOptionalCookbooksStore');


        Ext.applyIf(me, {
            store: chefOCS,
        });


        me.callParent(arguments);
    }
});
I am able to drag items from either grid and also reorder them in those same Grids. I want to keep this functionality but I would also like to try and override the drop method so that anytime I drop items from Grid 2 onto Grid 1, the item is automatically appended to the last row of that Grid. I would like to give the user the ability to drag anywhere onto Grid 1 but making sure it is always appended to the last row.

Now, if they are dragging and dropping from within Grid 1, keep the normal functionality. Only override the drop method if the record is coming from Grid 2.

Any ideas as to how I may be able to accomplish this?

Thank you