Sencha Touch 2 List Reload

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這樣的工具搭建本地GPS呼叫的橋樑（http://docs.phonegap.com/en/1.9.0/cordova_geolocation_geolocation.md.html#Geolocation）

希望這會有所幫助。