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-9c: Visualizing Data on Maps

Page of 168

Overview

During this lab, you will create a view that plots a friend's location on a map.

  • Instantiate a Map view
  • Center the map on a specific location
  • Display a Map Marker

Steps

Define the Excuses Store

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise9/exercise9.xds.
  3. Click the [+] on the Project Inspector titlebar and select Store.
  4. In the Project Inspector, click on MyStore2 and configure the following properties:
    • autoLoad: checked
    • storeId: Excuses
    • userClassName: Excuses
  5. In the Config panel, click on the [+] adjacent to the Fields property and enter the following field name:

    EXCUSE

  6. In the Config panel, click on the [+] adjacent to the Proxy property and select JsonP Proxy.
  7. In the Project Inspector, click on the MyJsonPProxy1 component and configure the following property:
  8. Set the url property to the following:

    http://webapps.figleaf.com/arch101/dataservices/mobile/beer.cfc?method=getExcuses
  9. In the Project Inspector, right-click on the Excuses store and select Load Data.
  10. Inspect the loaded data. You should see that over 20 records were loaded.

Create the FriendDetail View

  1. From the Toolbox, drag a Container component and drop it onto the Views category of the Project Inspector.
  2. Configure the following properties:
    • userClassName: friends.Detail
    • userAlias: friendsdetail
    • layout: vbox
    • rec: ''
    • excuse: ''
    Note: You will need to add rec and excuse as custom properties
  3. From the Toolbox, drag a Container component and drop it onto the friends.Detail view in the Project Inspector.
  4. Configure the following properties:
    • layout: hbox
    • itemId: frienddetails
    • height: 110
  5. From the Toolbox, drag a Map component and drop it onto the friends.Detail view in the Project Inspector.
  6. Configure the following Ext.Map properties:
    • flex: 1
    • itemId: map
Instantiate the View
  1. In the Config panel, click on the [+] adjacent to the Event Bindings property and select Basic Event Binding
  2. Choose the itemtap event from the selection list
  3. In the Project Inspector, right-click on the onListItemTap handler and select Convert to Action > Beers.
  4. Configure the following properties:
    • fn: onBeerFriendsListItemTap
    • controlQuery: beerfriendslist
  5. In the Project Inspector, double-click on the onBeerFriendsListItemTap method and enter the following code to instantiate the friends.Detail view:
var store = Ext.getStore('Excuses');
var itemNumber = Math.floor(Math.random() * (store.getCount()))

dataview.up('navigationview').push({
 xtype: 'friendsdetail',
 title: record.get('firstName') + ' ' + record.get('lastName'),
 rec: record,
 excuse: store.getAt(itemNumber).get("EXCUSE")
});

Initialize the Map

  1. In the Project Inspector, click on the friends.Detail view
  2. In the Config panel, click on the [+] adjacent to the Event Bindings property and select Basic Event Binding
  3. Choose the initialize event from the selection list
  4. In the Project Inspector, double-click on the initialize event that you defined in the prior step
  5. Enter the following code to initialize the map after a brief delay to wait for the Google Map to fully instantiate:
// get pointer to map component
var mapPanel = component.down('map');

// get pointer to passed-in data record
var rec = this.getRec();

// wait for map to become instantiated
Ext.Function.defer(component.initMap,100,this,[component,rec.get('lat'),rec.get('lng')]);

  1. In the Config panel, click on the [+] adjacent to the Functions property
  2. In the Project Inspector, click on the MyFunction8 function and configure the following properties:
    • fn: initMap
    • params: component,lat,lng
  3. In the Project Inspector, double-click on the initMap function.
  4. Enter the following code to initialize the map:
var mapPanel = component.down('map');
var map = mapPanel.getMap();

if (map == null) {
 // map not ready, try again
 Ext.Function.defer(this.initMap,250,this,[component,lat,lng]);
} else {
 //set the map center
 mapPanel.setMapCenter({
   latitude: lat, 
   longitude: lng
 });

 // drop a marker
 var pos = new google.maps.LatLng(lat,lng);

 var marker = new google.maps.Marker({
  position : pos,
  map : map
 });

 //display the surrounding traffic
 var trafficLayer = new google.maps.TrafficLayer();
 trafficLayer.setMap(map);
}
  1. Click Save
  2. Click Preview
  3. Test your application by adding a new contact, going to the Beers view, choosing your contact's associated Beer, and then tapping the contact name. The map view should appear and be centered on your contact's address.

-- End of Exercise --

Page of 168
comments powered by Disqus