0

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

私の 2 番目の質問は、アプリが 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.');
        }
4

1 に答える 1

0

質問 1 については、select の変更時にリスト コンポーネントのストアをリロードするだけです。この設定方法では、リスト経由でリスト コンポーネントのストアにアクセスする必要があります。たとえば、変更イベントでは次のようになります。

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 については、アプリをネイティブ シェルでラップすると、私の経験では HTML5 ジオロケーションが機能しません。PhoneGap (http://docs.phonegap.com/en/1.9.0/cordova_geolocation_geolocation.md.html#Geolocation) などのツールを使用して、ネイティブ GPS 通話へのブリッジを作成する必要があります。

お役に立てれば。

于 2012-07-17T19:31:01.537 に答える