1

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.

4

1 回答 1

1

首先，您要定义函数getSelectedStore并在调用时getLocalStore返回新的存储实例。这样，在您的点击处理程序中，您每次都会抓取一个空商店！丢失功能位，只需像这样设置变量：

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

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

然后，使用这些变量作为存储来定义您的网格：

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
});

然后，使用单击处理程序创建按钮：

Ext.widget('button', {
    handler: function (button, event) {
        var selected = grid1.getSelectionModel().getSelection();
        grid2.getStore().add(selected);
    }
    // rest of your configs
});
于 2012-10-05T14:15:18.400 回答