动态地为模型分配值

时间:2012-10-05 13:17:15

标签: extjs extjs4 extjs4.1

我尝试了一下,但没有用。

我有两个网格和一个按钮。最初,第二个网格将保持为空,第一个网格将有一些记录。当我在第一个网格中选择几个记录并单击按钮时,第二个网格应该只填充第一个网格的选定行。

这是我的代码:

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'));
        });*/
    }
}
});

请告诉我出了什么问题。

1 个答案:

答案 0 :(得分:1)

首先,您要定义调用时返回新商店实例的函数getSelectedStoregetLocalStore。这样在您的点击处理程序中,您每次都会抓住一个空的商店!丢失功能位,只需设置如下变量:

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