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）从第一网格面板选定的项目。我用它在我的萤火虫控制台上打印。但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); 

如果你的第二个网格使用不同的模型（即不同的商店字段），可以从选择创造新的纪录，而不是使用的同样的。但是，你仍然不应该尝试改变网格的存储。与records一起工作。

对于像你这样的复杂的例子，把一切在运行fiddle将帮助从这里快速和优质的答案;）