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

如果您的第二個網格使用不同的模型（即不同的商店字段），則可以從選擇中創建新記錄，而不是使用相同的記錄。 但是，你不應該試圖改變網格的存儲。 處理記錄 。

對於像你這樣的復雜例子，把所有東西放在一個小小的運行中，將有助於從這里獲得快速和高質量的答案;）