Getting geolocation variables to place in proxy - extjs

Question

I am trying to add in the current position of the device into the proxy call. I have already added in variables with '+radius+' and '+values+'. I have used Ext.util.Geolocation and can see the geolocation in the console. How do i get a lat and long variable out of this so i can add to the proxy like '+lat+' and '+lon+'
Ext.define('FirstApp.controller.History', {
extend:'Ext.app.Controller',
config:{
refs:{
main:'main',
placesContainer:'placesContainer',
placesList:'placesContainer places list',
info:'info',
review:'review',
rss:'rss',
favourites:'favourites',
mapcontainer:'mapcontainer',
visit: '#visit',
radius: '#radius'
},
control:{
'placesContainer places list':{
itemtap:'recordDetailsNavigation'
},
'main':{
activeitemchange:'recordTabChanged'
},
'#home': {
// On the tap event, call onNewTap
tap: 'onHomeTap'
},
'#info': {
// On the tap event, call onNewTap
tap: 'onInfoTap'
}
,
'#search': {
// On the tap event, call onNewTap
tap: 'onSearchTap'
}
,
'#leaveReview': {
// On the tap event, call onNewTap
tap: 'onReviewTap'
}
},
routes: {
'placesContainer': 'gotoPlacesContainer',
'placesContainer/:id': 'gotoPlacesContainerDetails',
'info': 'gotoInfo',
'review': 'gotoReview',
'rss': 'gotoRss',
'favourites': 'gotoFavourites',
'mapcontainer': 'gotoMapContainer'
}
},
recordDetailsNavigation:function (list, index, target, record) {
console.log("recordDetailsNavigation");
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url:'placesContainer/' + record.get('id')
}),true);
},
recordTabChanged:function(tab,value, oldValue){
console.log("recordTabChanged "+value.xtype);
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url:value.xtype
}),true);
},
gotoPlacesContainer:function(){
console.log('Goto PlacesContainer');
this.getMain().setActiveItem(0);
var items = this.getPlacesContainer().getItems();
console.log("PlacesContainer has "+items.length+" children")
if(items.length>1){
this.getPlacesContainer().pop();
}
},
gotoReview:function(){
console.log('Goto Review');
this.getMain().setActiveItem(1);
Reviews.load();
},
gotoMapContainer:function(){
console.log('Goto MapContainer');
this.getMain().setActiveItem(2);
},
gotoPlacesContainerDetails:function(id){
console.log('Goto PlacesContainer Details for id '+id);
this.gotoPlacesContainer();
this.getPlacesList().refresh();
this.getPlacesList().on('refresh',function(){
var store = Ext.getStore('Places');
var index = store.find('id',id);
var record = store.getAt(index)
this.getPlacesContainer().push({
xtype:'details',
title:record.data.name,
data:record.data
})
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url:'placesContainer/' + record.get('id')
}),true);
},this);
},
gotoInfo:function(){
console.log('Goto Info');
this.getMain().setActiveItem(3);
},
gotoRss:function(){
console.log('Goto Rss');
this.getMain().setActiveItem(4);
},
gotoFavourites:function(){
console.log('Goto Favourites');
this.getMain().setActiveItem(5);
},
onHomeTap: function() {
Ext.Viewport.setActiveItem(Ext.create('FirstApp.view.Home'));
},
onReviewTap: function() {
Ext.Viewport.setActiveItem(Ext.create('FirstApp.view.CreateReview'));
},
onInfoTap: function() {
Ext.Viewport.setActiveItem(Ext.create('FirstApp.view.Info'));
},
onSearchTap: function() {
Ext.Viewport.setActiveItem(Ext.create('FirstApp.view.Main'));
var values = this.getVisit().getValue();
var radius = this.getRadius().getValue() * 1000;
console.log(values);
console.log(radius);
var proxy = {
type:'ajax',
id:'myPlaceProxy',
url:'https://maps.googleapis.com/maps/api/place/search/json? location=52.247983,-7.141113&radius='+radius+'&types='+values+'&name=&sensor=false&key=',
reader:{
type:'json',
rootProperty:'results'
}
}
var geo = new Ext.util.Geolocation({
autoUpdate: false,
allowHighAccuracy: true,
listeners: {
locationupdate: function(geo) {
lat = geo.getLatitude();
lon = geo.getLongitude();
var proxy = Ext.getCmp('myPlaceProxy');
proxy.setUrl('https://maps.googleapis.com/maps/api/place/search/json?location='+lat+','+lon+'&radius='+radius+'&types='+values+'&name=&sensor=false&key=AIzaSyAAStZvDJ_5ENODEdSCanLWgJBG6p6eXBQ');
console.log(proxy);
Ext.StoreMgr.get('Places').setProxy(proxy);
Ext.StoreMgr.get('Places').load();
}
}
});
geo.updateLocation();
}
});
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:false,
model:'FirstApp.model.Place',
proxy:{
}
}
})

Answer 1

First of all give id to your proxy so that we can access it via id anytime
var proxy = {
type:'ajax',
id:'myPlaceProxy',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=52.247983,-7.141113&radius='+radius+'&types='+values+'&name=&sensor=false&key=',
reader:{
type:'json',
rootProperty:'results'
}
}
then in you geo location's locationupdate event access the proxy
var geo = new Ext.util.Geolocation({
autoUpdate: true,
allowHighAccuracy: true,
listeners: {
locationupdate: function(geo) {
lat = geo.getLatitude();
lon = geo.getLongitude();
var proxy = Ext.getCmp('myPlaceProxy');
proxy.setUrl('https://maps.googleapis.com/maps/api/place/search/json?location='+lat+','+lon+'&radius='+radius+'&types='+values+'&name=&sensor=false&key='');
console.log(proxy);
Ext.StoreMgr.get('Places').setProxy(proxy);
Ext.StoreMgr.get('Places').load();
}
}
});
then fire locationupdate event of your geo when ever you want by calling this
geo.updateLocation();
EDIT:
but i strongly recomment that dont always create var geo
you just have to call this geo.updateLocation(); on tap once you create it globally, in that way you can manage it much better
Try this:
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
id: 'myPlaces',
config:{
autoLoad:false,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json? location=52.247983,-7.141113&radius='+radius+'&types='+values+'&name=&sensor=false&key=AIzaSyAAStZvDJ_5ENODEdSCanLWgJBG6p6eXBQ',
reader:{
type:'json',
rootProperty:'results'
}
}
});
after that you can set the url in the tap event as
onSearchTap: function() {
Ext.Viewport.setActiveItem(Ext.create('FirstApp.view.Main'));
var values = this.getVisit().getValue();
var radius = this.getRadius().getValue() * 1000;
console.log(values);
console.log(radius);
var geo = new Ext.util.Geolocation({
autoUpdate: false,
allowHighAccuracy: true,
listeners: {
locationupdate: function(geo) {
lat = geo.getLatitude();
lon = geo.getLongitude();
Ext.StoreMgr.get('Places').getProxy().setUrl('https://maps.googleapis.com/maps/api/place/search/json?location='+lat+','+lon+'&radius='+radius+'&types='+values+'&name=&sensor=false&key='');
Ext.StoreMgr.get('Places').load();
}
}
});
geo.updateLocation();
}