第一次发布时，才开始使用extjs 2.3(在我的工作中)，并且遇到了一个奇怪的问题。基本上，我有一个选项供用户获取所选位置和多个预定义位置之间的SLD(直线距离)，因此用户单击SLD按钮，将打开一个新窗口，该窗口执行以下操作，将预定义位置加载到一个jsonstore，将该商店链接到新窗口中的网格中，当创建商店时，我还向google路线服务发送请求以返回位置之间的行驶距离，在回调时，我将此数据添加到存储中，这反过来更新了格。
我看到的问题是，第一次单击SLD按钮时，网格显示了信息，然后Google回调将额外的数据添加到存储中，我可以看到此信息显示在网格上。我在窗口上有一个后退按钮，单击该按钮可使用户返回菜单窗口，破坏SLD窗口并清空商店，因此不再有SLD窗口的痕迹。现在，当我再次单击主菜单上的SLD按钮时，就会出现此问题，但是我可以看到包含数据的网格，但是现在当谷歌回调返回并更新存储时，我看到单元格看起来像已被编辑但未保存。
在生产机器上，当我使用Firefox或Chrome时不会发生此问题，仅在IE上会发生，但是我写了一个小jsFiddle来重现该问题，现在当我运行测试时，该问题就在Chrome上发生。
我无法理解它第一次如何正常工作，然后第二次出现此问题，并且基本上它运行的代码与第一次相同!
这就是我的测试结果，添加了虚拟数据并简化了操作以重现问题
var testData = [
{'name': 'home', 'distance': 16.5, 'driving_distance': 0 },
{'name': 'work', 'distance': 35.2, 'driving_distance': 0 },
{'name': 'gym', 'distance': 12.8, 'driving_distance': 0 },
];
var locations;
// create store and load it with data
function createStore() {
locations = new Ext.data.JsonStore({
data: testData,
sortInfo: {
field: 'distance',
direction: 'ASC'
},
fields: [
{ name: 'name' },
{ name: 'distance', type: 'float' },
{ name: 'driving_distance', type: 'float' }
]
});
var myLocation = new google.maps.LatLng( '55.033778', '-7.125324' );
var anyLocation = new google.maps.LatLng( '54.972441', '-7.345526' );
var directionsService = new google.maps.DirectionsService();
var request = {
origin: new google.maps.LatLng( '55.033778', '-7.125324' ),
destination: anyLocation,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// get driving distance from myLocation to anyLocation and update locations store
for ( var x = 0; x < locations.data.length; x++ )
{
// call directions service
directionsService.route(request, function(response, status) {
// do stuff if we get a result
if (status == google.maps.DirectionsStatus.OK) {
// update store items to use same value just for text purposes
var distance = response.routes[0].legs[0].distance.value;
distance = distance / 1000;
// update on return call even though it updating the same thing 3 times
locations.data.items[0].set('driving_distance', distance.toFixed(1));
locations.data.items[1].set('driving_distance', (distance + 10.1).toFixed(1) );
locations.data.items[2].set('driving_distance', (distance + 23.3).toFixed(1) );
locations.commitChanges();
}
});
}
}
new Ext.Window ({
// menu normally consists of a combo box in which a user can select SLD
title: 'Menu - cut down',
id: 'rightClickWindow',
headerPosition: 'left',
scope: this,
buttons: [{
text: 'SLD',
id: 'SLDButton',
handler: function () {
// hide menu window
Ext.getCmp('rightClickWindow').hide();
// create store
createStore();
// create SLD window
new Ext.Window ({
title: 'SLD',
id: 'createSLDWindow',
headerPosition: 'left',
width: 450,
scope: this,
items: [{
xtype: 'grid',
id: 'SLDGrid',
singleSelect: true,
store: locations,
columns: [
{id: 'name', header: 'Location', width: 160, sortable: false, dataIndex: 'name'},
{header: 'SLD', width: 80, align: 'center', sortable: false, renderer: 'distance', dataIndex: 'distance'},
{header: 'Driving Distance', width: 90, align: 'center', sortable: false, renderer: 'driving_distance', dataIndex: 'driving_distance'}],
stripeRows: true,
autoExpandColumn: 'name',
enableHdMenu: false,
height: 250,
header: false
} ],
buttons: [{
text: 'Back',
id: 'SLDBackButton',
handler: function () {
// destroy SLD window
Ext.getCmp('createSLDWindow').destroy();
// show menu window
Ext.getCmp('rightClickWindow').show();
// destroy store
locations.loadData([],false);
}
}],
listeners: {
close: function (form) {
// destory everything
Ext.getCmp('createSLDWindow').destroy();
Ext.getCmp('rightClickWindow').destroy();
// destroy store
locations.loadData([],false);
}
}
}).show();
}
}]
}).show();
jsFiddle http://jsfiddle.net/UDkDY/74/
要重现单击SLD->返回-> SLD
最佳答案
我认为更新值的方式存在问题:
您发送3个请求(网格中的每一行一个)，但是在每个请求的回调中，您将更新所有行(当您仅应更新与该请求相对应的行时)。
范例:
http://jsfiddle.net/xer0d0he/
-