ExtJs 3.4：点击按钮，将所选项目从一个网格移动到另一个网格

Question

我有一个从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
});

这是我的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',
},
});

我的Json数据是这样的。

{'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' } ]}

用户可以从此网格中选择项目并将其移动到另一个网格中（按钮单击）。 这是我的第二个网格窗格;

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

这是我尝试将所选项目移动到第二个网格面板。

这是我按钮的监听器。

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

我尝试使用第一个网格面板中的选定项目为我的第二个网格（gpsGridStore）创建一个新商店。 我把它放在我的firebug控制台上打印。 但是gpsGridStore项是空的。 即locationName和estimatedTime采用空值。

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

estimatedTime
""

locationName
""

这是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"

我的代码出了什么问题？ 如果有人请这么好解释我的代码中的错误以及如何解决它，我将不胜感激。

非常感谢

Answer 1

不要创建另一个商店，只需从第一个网格的商店中删除所选记录，然后将它们添加到第二个网格的商店。 数据更改后，视图将自动更新。

以下是按钮侦听器的代码应如下所示：

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

如果您的第二个网格使用不同的模型（即不同的商店字段），则可以从选择中创建新记录，而不是使用相同的记录。 但是，你不应该试图改变网格的存储。 处理记录 。

对于像你这样的复杂例子，把所有东西放在一个小小的运行中，将有助于从这里获得快速和高质量的答案;）