Question

I gave it a try but it did not worked.

I am having two grids and a button. Initially the second grid will remain empty and the first grid will have some records.. When I select a few records in the first grid and click on the button, then the second grid should get populated with the only the selected rows of first grid.

Here is my code:

Ext.QuickTips.init();

var getLocalStore = function() {
    return Ext.create('Ext.data.ArrayStore', {
        model: 'Company',
        data: Ext.grid.dummyData
    });
};

var getSelectedStore = function() {
    return Ext.create('Ext.data.ArrayStore', {
        model: 'Company'
    });
};

var sm = Ext.create('Ext.selection.CheckboxModel');

var grid1 = Ext.create('Ext.grid.Panel', {
    id: 'grid1',
    store: getSelectedStore(),
    columns: [
        {text: "Company", width: 200, dataIndex: 'company'},
        {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {text: "Change", dataIndex: 'change'},
        {text: "% Change", dataIndex: 'pctChange'},
        {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    columnLines: true,
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Checkbox Selection and Horizontal Scrolling',
    iconCls: 'icon-grid',
    renderTo: 'grid1'
});

var grid2 = Ext.create('Ext.grid.Panel', {
    id: 'grid2',
    store: getLocalStore(),
    selModel: sm,
    columns: [
        {text: "Company", width: 200, dataIndex: 'company'},
        {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {text: "Change", dataIndex: 'change'},
        {text: "% Change", dataIndex: 'pctChange'},
        {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    columnLines: true,
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Checkbox Selection and Horizontal Scrolling',
    iconCls: 'icon-grid',
    renderTo: 'grid'
});  

Ext.widget('button', {
text: 'Click Me',   
renderTo: 'btn',
listeners: {
    click: function(this1, evnt, eOpts ){               
        var records = sm.getSelection();
        getSelectedStore().loadData(records,true);
        grid1.getView().refresh();
        /*Ext.each(records, function (record) {
            alert(record.get('company'));
        });*/
    }
}
});

Please let me what’s going wrong.

Answer 1

First, you are defining the functions getSelectedStore and getLocalStore which return new store instances when invoked. That way in your click handler you would be grabbing an empty store each time! Lose the function bit and just set variables like this:

var storeToSelectFrom = Ext.create('Ext.data.ArrayStore', {
    model: 'Company',
    data: someDataToChooseFrom
});

var storeToPutTo = Ext.create('Ext.data.ArrayStore', {
    model: 'Company'
});

Then, define your grids using those variables as the stores:

var grid1 = Ext.create('Ext.grid.Panel',{
    store: storeToSelectFrom,
    selType: 'checkboxmodel'
    // rest of your configs
});

var grid2 = Ext.create('Ext.grid.Panel',{
    store: storeToPutTo
    // rest of your configs
});

Then, create the button with a click handler:

Ext.widget('button', {
    handler: function (button, event) {
        var selected = grid1.getSelectionModel().getSelection();
        grid2.getStore().add(selected);
    }
    // rest of your configs
});