Question

我正在尝试创建使用JSONP加载列表的视图，但我想在用户从selectfield中选择一个值时重新加载列表。我的代码：

var distance = 50;

Ext.define('MyApp.view.ListUpdate', {
    extend: 'Ext.Container', //Ext.navigation.View
    xtype: 'listUpdate',
    requires: [
        'Ext.dataview.List',
        'Ext.data.proxy.JsonP',
        'Ext.data.Store',
        'Ext.field.Select'
    ],
    config: {
        style: ' background-color:white;',
        layout: 'vbox',
        items: 
        [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'List update',
                minHeight: '60px',
                items: [
                    {
                        ui: 'back',
                        xtype: 'button',
                        id: 'backButton', //taki sam id jak w view.GdzieJestem
                        text: 'Back',
                    },
                    {
                        minHeight: '60px',
                        right: '5px',
                        html: ['<img src="resources/images/myImage.png"/ style="height: 100%; ">',].join(""),
                    },
                ],          
            },
            {
                xtype: 'fieldset',
                title: 'Choose distance',
                items: [
                    {
                        xtype: 'selectfield',
                        id: 'selectField',
                        options: [
                            {text: '50km',  value: 50},
                            {text: '100km', value: 100},
                            {text: '150km',  value: 150},
                            {text: '200km',  value: 200},
                            {text: '250km',  value: 250},
                            {text: '300km',  value: 300},
                            {text: '350km',  value: 350},
                            {text: '400km',  value: 400},
                            {text: '450km',  value: 450},
                            {text: '500km',  value: 500},
                            {text: '550km',  value: 550},
                            {text: '600km',  value: 600},
                        ],
                        listeners: {
                            change: function (select, newValue, oldValue) {
                                // console.log('change', newValue.data.value);
                                console.log(Ext.getCmp('selectField').getValue());
                                distance = Ext.getCmp('selectField').getValue();
                            } // change
                        } // listeners
                    }
                ]
            },

            { 
                xtype: 'list',
                style: ' background-color:white;',
                itemTpl: '<h2>{company}, {firstName} {lastName}</h2><p> <span style="color:blue;">{city}, {street}, tel: {telephoneNumber},&nbsp; </span><span style="color:orange;"> odległość: {distance}km</span></p>',
                flex: 1,
                store: {
                    autoLoad: true,
                    fields : ['company', 'firstName', 'lastName', 'city', 'street', 'telephoneNumber', 'distance'],
                    proxy: {
                        type: 'jsonp',
                        url: 'http://192.168.1.15:8080/MyServer/agents/list?userLat='+lat+'&userLon='+lon+'&distance='+distance+'',
                        reader: {
                            type: 'json',
                            rootProperty: 'agents'
                        }
                    }
                }
            }   
        ]
    }
});

我的第二个问题是：你知道为什么地理定位在Chrome浏览器中运行时有效，但当它在设备上本机运行时，地理定位无效。代码：

var lat = 0;
var lon = 0;

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(
                function (position) {
                    console.log(position.coords.latitude);
                    console.log(position.coords.longitude);
                     lat = position.coords.latitude;
                     lon = position.coords.longitude;
                    //Ext.Viewport.setActiveItem(Ext.create('Proama.view.WyszukajAgenta'));
                },

                function (error)
                {
                    switch(error.code)
                    {
                        case error.TIMEOUT:
                            alert ('Timeout');
                            break;
                        case error.POSITION_UNAVAILABLE:
                            alert ("Postition unavailable");
                            break;
                        case error.PERMISSION_DENIED:
                            alert ('Permission denied');
                            break;
                        case error.UNKNOWN_ERROR:
                            alert ('Unknown error');
                            break;
                    }
                }
            );
        }
        else {
            alert('Problem with device.');
        }

Answer 1

对于问题1，我只会在选择更改时重新加载列表组件的商店。您进行此设置的方式需要通过列表访问列表组件的存储。例如，关于变更事件：

change: function(select, newValue, oldValue){
    var items = select.getParent().getParent().getItems(); // access parent's parent's items
    var list = items[1]; // list is the second item in the parent's 
    list.getStore().load(); // reload the list's store

}

理想情况下，您应该抽象商店并在应用程序级别注册它（如果您使用MVC格式进行开发）。通过抽象存储，您可以调用Ext.getStore（'MyStore'）。load（）;在你的申请中的任何地方。

对于问题2，当您将应用程序包装在本机shell中时，根据我的经验，HTML5地理位置不起作用。您需要使用PhoneGap等工具（http://docs.phonegap.com/en/1.9.0/cordova_geolocation_geolocation.md.html#Geolocation）与原生GPS呼叫建立桥梁

希望这有帮助。

Sencha Touch 2 List Reload

1 个答案: