grid to grid buttons

[AssetWorks]

Okay so I have been looking for something like itemselector but with grids. so I created my own control that can be placed between two grids and it will take the selected records and place add/remove them to the other grid.

here it is.

Ext.define('App.view.controls.CamGridToGridBtns', {
    extend: 'Ext.container.ButtonGroup',
    alias: 'widget.gridtogridbtns',
    columns:1,
    height: 300,
    width:28,
    margin: '5 0 5 0',
    items: [{
        margin: '120 0 0 0',
        iconCls: 'x-tbar-page-prev',
        handler: function (btn) {
            var me = this.up('container');
            var grid = me.next();
            selected = grid.getView().getSelectionModel().getSelection();
            me.moveRec(false, selected);
        }
    },{
        margin: '0 0 130 0',
        iconCls: 'x-tbar-page-next',
        handler: function (btn) {
            var me = this.up('container');
            var grid = me.prev();
            selected = grid.getView().getSelectionModel().getSelection();
            me.moveRec(true, selected);
        }
    }],


    moveRec: function (add, recs) {
        var me = this,
        fromGrid = me.prev(),
        toGrid = me.next(),
        fromStore = add ? fromGrid.store : toGrid.store,
        toStore = add ? toGrid.store : fromGrid.store;
        toStore.add(recs);
        fromStore.remove(recs);
    }
});

HOW TO USE IT:

...
{xtype: 'grid', itemId: 'grid1',columns:[{text:'Name', dataIndex:'Name'},{text:'Age', dataIndex:'Age'}]},
{xtype: 'gridtogridbtns'},//<---use it in between two grids
{xtype: 'grid', itemId: 'grid2', columns:[{text:'Name', dataIndex:'Name'},{text:'Age', dataIndex:'Age'}]}

if you want to improve on in anyway feel free to hack at it.
or even if someone has made a better one already let me know

[mitchellsimoens]

Thanks for posting how you solved your need.