ExtJs double click on grid row should move item to another grid

Question

I have two grids, and I want to move items from grid to another by double clicking on first grid. I added a listener to first grid and having trouble showing the selected item in second grid

                Ext.define('SessionGridPanel', {
                extend: 'Ext.grid.Panel',
                alias: 'widget.sessiongridpanel',
                listeners: {
                    itemdblclick: function (gridpanel, record, item, e) {

                        var selectedForm = Ext.create('SelectedPanel');                            
                        selectedForm.getStore.add(record);
                        //selectedForm.getStore().insert(0, [record]);
                        //selectedForm.getView().getStore().insert(0, record);
                    }

Below is my second grid

                Ext.define('SelectedPanel', {
                xtype: 'grid',
                itemId: 'myGrid',
                id: 'myIdGrid',
                extend: 'Ext.grid.Panel',
                alias: 'widget.selectedformpanel',
                store: {
                    fields: [
                        { name: 'id', type: 'int' },
                        { name: 'title', type: 'string' },
                        { name: 'approved', type: 'bool' }
                    ]
                },
                selModel: sm,
                columns: [
                    {
                        text: 'Id',
                        xtype: 'gridcolumn',
                        sortable: true,
                        dataIndex: 'id'
                    },
                    {
                        text: 'Title',
                        xtype: 'gridcolumn',
                        sortable: true,
                        dataIndex: 'title'
                    },
                    {
                        text: 'Approved',
                        xtype: 'gridcolumn',
                        sortable: true,
                        dataIndex: 'approved'
                    }
                ],
                dockedItems: [{
                    xtype: 'container',
                    cls: 'eformscontainerbutton',
                    dock: 'top',
                    items: [{
                        xtype: 'button',
                        id: 'moveUp',
                        action: 'moveUp',
                        margin: '4 10 4 0',
                        cls: 'sagitta-deluxe-button',
                        width: 105,
                        tooltip: 'Move Up',
                        text: 'Move Up'
                    },
                        {
                            xtype: 'button',
                            id: 'moveDown',
                            action: 'moveDown',
                            tooltip: 'Move Down',
                            margin: '4 0 4 10',
                            cls: 'sagitta-deluxe-button',
                            width: 105,
                            text: 'Move Down'
                        }
                    ]
                },
                {
                    // container for the action buttons GENERATE FORMS, VIEW, and CLEAR
                    xtype: 'container',
                    cls: 'eformscontainerbutton',
                    margin: '2 0 2 0',
                    dock: 'bottom',
                    items: [

                        {
                            xtype: 'button',
                            id: 'clear',
                            action: 'clearAll',
                            tooltip: 'Clear all selections',
                            margin: '4 3 0 10',
                            cls: 'sagitta-deluxe-button',
                            width: 105,
                            text: 'Clear'
                        }]
                }]

            });

I tried to google but couldn't get any thing related to double click, I tried the same way with button click by using store.add and store.insert, but that doesn't work either.

Answer 1

I made a small example for you in sencha fiddle: https://fiddle.sencha.com/#fiddle/sg1

Build two stores with a sharing model. Added the itemdblclick listener to the grids with add/remove:

listeners: {
    itemdblclick: function(grid, record) {
        store2.add(record);
        store1.remove(record);
     }
}

Answer 2

In itemdblClick, try this:

itemDblClick: function() {
    var store =   gridpanel.getStore(); // this is store from where record will remove
    store.remove(record);
    var store1 = Ext.ComponentQuery.query('grid').getStore(); //  you can use any way to get other grid store.
    store1.add(record); // it will add record in last index of other grid
}