ajax - 存储中的数据更改后，Sencha Touch 刷新列表

Question

我想做以下事情:

我有一个从服务器获取 JSON 数据的商店。 JSON 看起来像这样:

{"id":"1","name":"Name1","address":"exampleaddress1","lat":"48.366268","lng":"10.892320","distance":"0"},{...}]

我的模型和商店:

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
                                    });

                                }



                        }

                    });

我不明白，为什么两个 console.logs 显示不同的距离值。谁能给我解释一下？

我的 list :

var listPanel = new Ext.List({
                title: 'ListStore',
                store: ListStore,
                id: 'addresslist',
                itemTpl: '<div class="contact">{name}, {address}, {distance}</div>',
                rendered: false,
                listeners: {
                    beforerender: function(){

                        ListStore.load();

                    }
                }

            });

我计算距离的函数:

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;

    };

正如我所说，正确计算了距离并返回了对象...但我无法更新商店或列表中的记录...

Answer 1

I don't understand, why the two console.logs show different values for the distance. Can anyone explain that to me ?

您在使用 Chrome 吗？ Chrome 控制台有时会出现最新控制台数据问题

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...

您脚本中存储的记录始终是最新的 - 在 JS 中，对象通过引用传递，因此您甚至不必返回 newData - 存储对象将自动更新

在为存储类型添加一些值之后:

listpanel.refresh()

加载当前商店到列表