Sencha Touch 2 List Reload - list

Question

I'm trying to create view which loads list using JSONP, but I want to reload the list when user choose a value from selectfield.
My code:
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}, </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'
}
}
}
}
]
}
});
My second question is: Have you any idea why geolocation works when app runs in Chrome but when it runs on device natively, geolocation doesnt work.
Code:
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

For question 1, I would just reload the list component's store on select change. The way you have this setup you will need to access the list component's store via the list. for example, on change event:
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
}
Ideally you should abstract the store and register it at the application level (if you are developing in MVC format). With the store abstracted you would be able to call Ext.getStore('MyStore').load(); anywhere in your application.
As for question 2, when you wrap the app in a native shell, in my experience HTML5 geolocation does not work. You will need to make a bridge to the native GPS calls using a tool like PhoneGap (http://docs.phonegap.com/en/1.9.0/cordova_geolocation_geolocation.md.html#Geolocation)
Hope this helps.