存储中的数据更改后,Sencha Touch刷新列表

时间:2011-09-06 09:07:32

标签: ajax geolocation sencha-touch extjs

我想做以下事情:

我有一个从服务器获取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显示不同的距离值。任何人都可以向我解释一下吗?

我的清单:

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;

    };

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

1 个答案:

答案 0 :(得分:3)

  

我不明白,为什么两个console.logs显示不同的距离值。任何人都可以向我解释一下吗?

您使用的是Chrome吗? Chrome控制台有时会出现最新的控制台数据问题

  

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

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

在向商店类型添加一些值之后:

listpanel.refresh()

将当前商店加载到列表