extjs 2.3 сбой сетки при обновлении магазина

Question

Публикация в первый раз, только начали использовать extjs 2.3 (в моей работе) и столкнулись с какой-то странной проблемой. В принципе, у меня есть возможность для пользователя получить SLD (расстояние по прямой линии) между выбранным местоположением и рядом предопределенных местоположений, поэтому пользователи нажимают кнопку SLD, открывается новое окно, которое выполняет следующее: загружает предопределенные местоположения в jsonstore, связывает это хранилище с сеткой в ​​новом окне, когда создается хранилище, я также отправляю запрос на поиск сервисов googles, чтобы вернуть расстояние между местоположениями, при обратном вызове я добавляю эти данные для хранения, который по очереди обновляет сетка.

Проблема, которую я вижу, при первом нажатии кнопки SLD, сетка отображает информацию, а затем обратный вызов google добавляет дополнительные данные в хранилище, и я вижу, что это отображается в сетке. У меня есть кнопка возврата в окне, которая при нажатии на кнопку возвращает пользователя в окно меню, уничтожает окно SLD и освобождает хранилище, поэтому больше нет следа окна SLD. Проблема будет сейчас, когда я снова нажму кнопку SLD в главном меню, я вижу сетку с данными, но теперь, когда обратный вызов google возвращает и обновляет хранилище, я вижу, что ячейки выглядят так, как будто они были отредактированы и не сохранены.

На моем производстве этот вопрос не возникает, когда я использую Firefox или Chrome, но это происходит только в IE, однако я написал небольшой jsFiddle, чтобы воспроизвести проблему, и теперь проблема возникает в Chrome при запуске теста ,

Я не могу понять, как он может работать правильно в первый раз, а затем второй раз есть эта проблема, и в основном он работает с тем же кодом, что и в первый раз!

Это то, что мой тест выглядит, добавили фиктивные данные и упрощенные вещи, чтобы воспроизвести 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/

для воспроизведения нажмите SLD -> назад -> SLD

Answer 1

I подумайте, что есть проблема с тем, как вы обновляете значения: вы отправляете 3 запроса (по одному для каждой строки в сетке), но при обратном вызове каждого запроса вы обновляете ВСЕ строки (когда вы должны обновлять линию co соответствующая запросу).

Пример: http://jsfiddle.net/xer0d0he/

-