title: Sencha Touch refresh list after data in store has been changed
body: <p>i want to do the following: </p>
  
  <p>I have a store which gets JSON data from the server. The JSON looks like this: </p>
  
  <pre><code>{"id":"1","name":"Name1","address":"exampleaddress1","lat":"48.366268","lng":"10.892320","distance":"0"},{...}]
  </code></pre>
  
  <p>My model and store:</p>
  
  <pre><code>Ext.regModel('Filiale', {
          fields: ['id', 'name', 'address', 'distance', 'lat', 'lng'],
  });
  
  var ListStore = new Ext.data.Store({
                          model: 'Filiale',
                          id: 'ListStore',
                          autoLoad: false,
                          fields:['name', 'address', 'distance'],
                          proxy: {
                              type: 'ajax',
                              url : 'http://example.com/getSomeJson.php',
                              reader: {
                                  type: 'json'
                              }
                          },
                          listeners: {
                              load: function(){
  
                                  ListStore.each(function(store){
  
                                          var newData = getDistance(store.data); // this function calculates the distance from currentLocation to the received address    
                                          console.log(newData); // i see a object in the console, with the correct calculated distance
                                          console.log(newData.distance); // this shows the old distance which is set to '0' in the databse
                                          //at this point i want to update the received records with the new distance, but the list always shows the old distance
                                      });
  
                                  }
  
  
  
                          }
  
                      });
  </code></pre>
  
  <p>I don't understand, why the two console.logs show different values for the distance. Can anyone explain that to me ?</p>
  
  <p>My List:</p>
  
  <pre><code>var listPanel = new Ext.List({
                  title: 'ListStore',
                  store: ListStore,
                  id: 'addresslist',
                  itemTpl: '&lt;div class="contact"&gt;{name}, {address}, {distance}&lt;/div&gt;',
                  rendered: false,
                  listeners: {
                      beforerender: function(){
  
                          ListStore.load();
  
                      }
                  }
  
              });
  </code></pre>
  
  <p>my function to calculate the distance:</p>
  
  <pre><code>var getDistance = function(dataset){
  
          navigator.geolocation.getCurrentPosition(function(position){
  
              var start = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
              //add current position marker to map
                  var marker = new google.maps.Marker({
                      map: mapPanel.map,
                      position: start
  
  
                  });
  
  
  
              var end = new google.maps.LatLng(dataset.lat, dataset.lng);
              var service = new google.maps.DirectionsService();
              var request = {
                  origin: start,
                  destination: end,
                  travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
  
              service.route(request, function(result, status){
  
                  if (status == google.maps.DirectionsStatus.OK) {
  
                      dataset.distance = result.routes[0].legs[0].distance.value / 1000;
  
  
  
                  }
  
              });
  
  
          }); 
          return dataset;
  
      };
  </code></pre>
  
  <p>And as i said, the distance is correctly calculated and the objects gets returned... but i'm unable to update the records in the store or the list... </p>