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-9d: Completing the Friends Detail View

Page of 168

Overview

During this lab, you will complete the friends.Detail view to display your friend's address, display the random excuse message, and add buttons to dial and email him/her.

  • Output markup using a template
  • Launch the phone dialer
  • Launch the email application

Steps

Define an XTemplate

  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.Detail view.
  4. From the Toolbox, drag a Container and drop it onto the friends.Detail frienddetails component.
  5. Configure the following properties:
    • flex: 1
    • html: Placeholder
    • itemId: frienddetail
    • margin: 0 5 5 0
    • padding: 5 5 5 5
    • style: box-shadow: 3px 3px 4px #444; background-color: white
    • scrollable: true
  6. In the config panel, click on the [+] adjacent to the tpl property.
  7. In the project inspector, double-click on the tpl object that is bound to the frienddetail component.
  8. Enter the following code to output information about your friend:
{firstName} {lastName}
{address}
{favoriteBeer} is only {distance} mi away!
{excuse}

Add an Email Button
  1. From the Toolbox, drag a Container and drop it onto the friends.Detail frienddetails component.
  2. Configure the following Container properties:
    • itemId: contactbuttons
    • layout: vbox
  3. From the Toolbox, drag a Button component and dop it onto the contactbuttons container in the Project Inspector.
  4. Configure the following properties:
    • itemId: btnMail
    • margin: 5 5 5 5
    • iconAlign: top
    • iconCls: mail
    • iconMask: true
    • text: (empty)
    • scope: this
  5. In the Config panel, click on the [+] adjacent to the Handler property.
  6. In the Project Inspector, double-click on the handler and enter the following code to launch the email client:
var top = button.up('friendsdetail');
var mailString = Ext.String.format(
    "mailto:{0}?subject=Can I come over&body={1}",
    top.getRec().get("email"),
    top.getExcuse()
);
location.href=mailString;

Add a Dial Button
  1. From the Toolbox, drag a Button component and dop it onto the contactbuttons container in the Project Inspector.
  2. Configure the following properties:
    • itemId: btnPhone
    • margin: 5 5 5 5
    • iconAlign: top
    • iconCls: phone1
    • iconMask: true
    • text: (empty)
    • scope: this
  3. In the Config panel, click on the [+] adjacent to the Handler property.
  4. In the Project Inspector, double-click on the handler and enter the following code to launch the email client:


    var top = button.up('friendsdetail');
    location.href='tel:' + top.getRec().get('phone');
Generate the Markup
  1. In the Project Inspector, double-click on the onContainerInitialize method of the friends.Detail view.
  2. Add the following code to the top of the function:
// get pointer to detail panel
var detailPanel = component.down('#frienddetail');

// massage data
var data = this.getRec().data;
data.excuse = this.getExcuse();

// generate markup from template
detailPanel.setData(data);
  1. Click Save
  2. Click Preview
  3. Test your application by going to the Beers view and choosing your contact's associated Beer. Then click on the contact name. You should see your contact's details and map of their surrounding location. Click on the dial and email buttons to test their functionality.

-- End of Exercise --

Page of 168
comments powered by Disqus