javascript - ExtJs 3.4 : Move selected items from one grid to another on a button click

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

用户可以从此网格中选择项目并将其移动到另一个网格中(单击按钮时)。这是我的第二个网格 Pane ；。

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

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

按钮监听器的代码应如下所示:

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

如果您的第二个网格使用不同的模型(即不同的商店字段)，您可以从选择中创建新记录，而不是使用相同的记录。但是，您仍然不应该尝试更改网格的存储。与 records 合作.

对于像您这样的复杂示例，请将所有内容放入运行中 fiddle将有助于从这里获得快速且高质量的答案;)