First time posting, have only started using extjs 2.3 (at my work) and have run into a strange issue. Basically I have an option for a user to get SLD (straight line distance) between a location they have selected and a number of predefined locations, so the users clicks the SLD button, a new window opens which does the following, loads predefined locations into a jsonstore, links this store into a grid in the new window, when the store is created I also send a request to googles directions service to return the driving distance between the locations, on callback I add this data to store which in turns updates the grid.
The issue I see is, the first time the SLD button is clicked, the grid displays the information, and then the google callback adds the extra data into the store and I can see this displayed on the grid. I have a back button on the window, which when clicked returns the user to the menu window, destroys the SLD window and empties the store, so there is no trace of the SLD window any more. The issue will happen now when I click the SLD button again on the main menu, I can see the grid with data but now when the google callback returns and updates the store I see that the cells look like they have been edited and not saved.
On my production machine this issue does not happen when I use Firefox or Chrome, only happens on IE, however I have wrote a small jsFiddle to reproduce the issue and now get the issue to happen on Chrome when I run the test.
I can't understand how it can work correctly the first time, then the second time have this issue, and basically its running the same code as the first time!
This is what my test looks like, have added dummy data and simplified things to reproduce issue
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/
to reproduce click SLD -> back -> SLD
