Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Exercise 2-9b: Calculating Distance to Targets

Page of 168

Overview

During this lab, you will modify the beer.FriendsList view to display the distance from your device's current location to your friends.

  • Add a custom funtion to a controller
  • Acquire the current position of the device
  • Calculate the distance between two points

Steps

Define a function to calculate distance

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise9/exercise9.xds.
  3. In the Project Inspector, click on the Friends controller.
  4. In the Config panel, click on the [+] adjacent to the Functions property.
  5. In the Project Inspector, click on the function that was added from the prior step and configure the following properties:
    • fn : calcDistance
    • params: lat1,lng1,lat2,lng2
  6. Click the Code button.
  7. Enter the following code to calculate the distance between two points:
var R = 3959; // use 3959 for miles or 6371 for km
var dLat = (lat2-lat1) * Math.PI / 180 ;
var dLon = (lng2-lng1)* Math.PI / 180;

lat1 = lat1 * Math.PI / 180;
lat2 = lat2 * Math.PI / 180;

var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 

return Ext.Number.toFixed(R * c,2); 


Define a Method to Calculate the Distance Between the Device and Your Friends

  1. In the Config panel, click on the [+] adjacent to the Functions property.
  2. In the Project Inspector, click on the function that was added from the prior step and configure the following properties:
    • fn : calcDistances
    • params: callback,scope
  3. Click the Code button.
  4. Enter the following code to get the position of the device and update the distance to your friends:
// please wait - async op
Ext.Viewport.setMasked({
    xtype: 'loadmask' 
});

// preserve scope for callback
var me=this;

// get current position
var geo = Ext.create('Ext.util.Geolocation', {
 autoUpdate: false,
 listeners: {
  locationupdate: function(geo) {
   // calculate distance to target
   var store = Ext.getStore('Friends');
   store.each(function(item,index,length) {
    item.set( "distance",
              me.calcDistance(
                item.get("lat"),
                item.get("lng"), 
                geo.getLatitude(),  
                geo.getLongitude()
              )
     );
    });
    Ext.Viewport.setMasked(false);
    // invoke callback function, if appropriate
    if (callback) {
       callback.call(scope);
    }
   },
    locationerror: function(geo, 
                            bTimeout,
                            bPermissionDenied, 
                            bLocationUnavailable, 
                            message) {
       Ext.Viewport.setMasked(false);
       if(bTimeout){
         Ext.Msg.alert('Aw, Snap!','Timeout occurred.');
       } else {
         Ext.Msg.alert('Aw, Snap!', 'An Error occurred.');
       }
   }
 }
});
// run once
geo.updateLocation();
  1. In the Project Inspector, click on the beers.friendsList view
  2. In the config panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding.
  3. Choose the activate event from the list.
  4. In the Project Inspector, right-click on the activate event and select Convert to Action > Friends
  5. Configure the following properties:
    • controlQuery: beerfriendslist
    • fn: onBeerFriendsListActivate
  6. In the Project Inspector, double-click on the onBeerFriendsListActivate method.
  7. Enter the following code to run the calcDistances() method:

    this.calcDistances();
  1. Click Save
  2. Click Preview
  3. Test your application by adding a new contact, going to the Beers view and choosing your contact's associated Beer. After a brief delay, you should see the distance field automatically update.

-- End of Exercise --

Page of 168
comments powered by Disqus