ExtJs 3.4 : Move selected items from one grid to another on a button click

Question

I have a check box model grid which is loaded from JsonStore.

var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170,
    renderer : function(value, metaData, record, rowIndex,
            colIndex, store) {
        var refColor = record.data.tourTypeColor;
        //console.log(record);
        metaData.attr = 'style="background-color:' + refColor + ';"';
        return record.get('locationName');
    }
}, {
    header : "Town/City",
    sortable : true,
    dataIndex : 'city',
    width : 120
}, {
    header : "Address",
    sortable : true,
    dataIndex : 'addr',
    width : 170
}, {
    header : "EST.Un/Load Time",
    sortable : true,
    dataIndex : 'estimatedTime',
    width : 100
} ]),
sm : new Ext.grid.CheckboxSelectionModel(),
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});

This is my dropPickGridStore:

var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
    name : 'locationCode'
}, {
    name : 'locationName'
}, {
    name : 'city'
}, {
    name : 'addr'
}, {
    name : 'estimatedTime'
}, {
    name : 'tourTypeColor'
} ],
root : 'dropPickLoc',
idProperty : 'locationCode',
//autoDestroy : true,
autoLoad : true,

proxy : new Ext.data.HttpProxy({
    url : "http://" + host + ":" + port + "/" + projectName + "/"
            + "PendingDropPicks"

}),
reader : {
    type : 'json',
    root : 'dropPickLoc'
    //idProperty : 'locationName',
},
});

My Json data is like this.

{'dropPickLoc':[{ 'locationCode' : '10007', 'locationName' : 'Gayan Hardware', 'city' : 'Galle', 'addr' : '121, Wijaya Rd, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10004', 'locationName' : 'Kandy Hardware', 'city' : 'Kandy', 'addr' : '11, Kurunagala Road, Kandy', 'estimatedTime' : '40', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10009', 'locationName' : 'Mala Stores', 'city' : 'Colombo', 'addr' : '11B, Thimbirigasyaya, Colombo', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10003', 'locationName' : 'Namal Ceramic', 'city' : 'Kurunagala', 'addr' : '12B, Lumbini Udyanaya, Kurinagala', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10000', 'locationName' : 'Priya Ceramic', 'city' : 'Nugegoda', 'addr' : '15, Nugegoda', 'estimatedTime' : '40', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10002', 'locationName' : 'Sam Stores', 'city' : 'Galle', 'addr' : '46A, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10008', 'locationName' : 'Saman Stores', 'city' : 'Polgahawela', 'addr' : '111, Kurunagala Rd, Kurunagala', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10006', 'locationName' : 'Sell-X Computors', 'city' : 'Ratnapura', 'addr' : '12, Tiriwanakatiya, Ratnapura', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10001', 'locationName' : 'Super Stores', 'city' : 'Kandy', 'addr' : '16, Kandy Road', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10005', 'locationName' : 'Wijesingha Hardware', 'city' : 'Galle', 'addr' : '113A, Wackewella Road, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } ]}

User can select items from this grid and move them into another grid(on button click). Here is my second grid pane;.

var gps_grid = new Ext.grid.GridPanel({
store : estore,
cm : new Ext.grid.ColumnModel([ selectModel, {
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170
}, {
    header : "GPS",
    sortable : true,
    dataIndex : 'gps',
    width : 100
}, {
    header : "EST.Un/Load Time",
    sortable : true,
    dataIndex : 'estimatedTime',
    width : 100
}, {
    header : "",
    sortable : true,
    dataIndex : 'colorCode',
    width : 30
} ]),

sm : selectModel,
//width : 435,
//height : 400,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});

This is my attempt to move selected items to second grid panel.

This is a listener for my button.

listeners: {
                        click: function(){
                            if (drop_pick_grid.getSelectionModel().hasSelection()) {
                                   selectedItems = drop_pick_grid.getSelectionModel().getSelections();
                                   console.log(selectedItems);
                                   var myReader = new Ext.data.ArrayReader({}, [{
                                        name: 'locationName',
                                        dataIndex: 'locationName'
                                    }, {
                                        name: 'estimatedTime',
                                        dataIndex: 'estimatedTime'
                                    } ]);
                                   var gpsGridStore = new Ext.data.Store({
                                      data : selectedItems,
                                      reader : myReader,
                                      autoLoad : true
                                   });
                                   console.log(gpsGridStore);
                                }
                        }
                    }

I tried to create a new store for my second grid (gpsGridStore) with selected items from the first grid panel. I lete it to print in my firebug console. But gpsGridStore items are empty. ie locationName and estimatedTime take empty values.

data
Object { locationName="", estimatedTime=""}

estimatedTime
""

locationName
""

And this the console output for selectedItems:

data
Object { locationCode="10000", locationName="Priya Ceramic", city="Nugegoda", more...}

addr
"15, Nugegoda"

city
"Nugegoda"

estimatedTime
"40"

locationCode
"10000"

locationName
"Priya Ceramic"

tourTypeColor
"yellow"

What's wrong with my codes ? I would be much appreciated if anyone please be so kind enough to explain whats the error in my codes and how can I fix it.

Thanx a lot

Answer 1

Don't create another store, just remove the selected records from the store of the first grid, and add them to the store of your second grid. The view will be updated automatically, following data changes.

Here's what the code of your button listener should look like:

var records = dropPickGrid.selModel.getSelections();
dropPickGrid.getStore().remove(records);
gpsGrid.getStore().add(records);

If your second grid uses a different model (ie different store fields), you can create new records from the selection instead of using the same ones. But still, you should not try to change the store of the grid. Work with records .

For complex examples like yours, putting everything in a running fiddle will help get fast and quality answers from here ;)