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-9e: Building the Friend Randomizer

Page of 168

Overview

During this lab, you will create the FriendRandomizer that randomly chooses to display information about one of your friends.

  • Define a view
  • Randomly select a record from a Store
  • Dynamically instantiate a View

Steps

Define the Friend Randomizer View

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise9/exercise9.xds.
  3. From the Toolbox, drag a Container and drop it onto the Main view.
  4. Configure the following Ext.Container properties:
    • title: Beer Me!
    • iconCls: phone_ring1
    • itemId: friendrandomizer
    • layout: fit
  5. In the Project Inspector, click on the Main view.
  6. Add the following class to the requires property:

    Ext.layout.Fit

  7. From the Toolbox, drag a Titlebar and drop it onto the Main > friendrandomizer view.
  8. Configure the following titlebar property:
    • title: Friend Randomizer

Define the Control Logic

  1. In the Project Inspector, click on the Friends controller and configure the following properties:
    • Stores: Friends,Excuses
    • Views: friends.Detail
  2. In the Config panel, click on the [+] adjacent to the Actions property and select Controller Action . Choose the following options from the select lists:
    • Target: Ext.Component
    • Event: activate
  3. In the Project Inspector, click on the onContainerShow method of the FriendRandomizer controller.
  4. Configure the following properties:
    • fn: onFriendRandomizerActivate
    • controlQuery: container#friendrandomizer
  5. In the Project Inspector, double-click on the onFriendRandomizerActivate method.
  6. Enter the following code to calculate the distance to your friends and then randomly select one from the data store.

this.calcDistances(function() {
 var estore, 
     fstore, 
     itemNumber, 
     currentExcuse="", 
     currentFriend;
    
 container.removeAll(false);
  
  eStore = Ext.getStore('Excuses');
  if (eStore.getCount() > 0) {
    itemNumber = Math.floor(Math.random() * (eStore.getCount()));
    currentExcuse = eStore.getAt(itemNumber).get("EXCUSE");
  }

  fstore = Ext.getStore('Friends');
  if (fstore.getCount() === 0) {
   Ext.Msg.alert("Error","You must add friends before using this feature.");   
  } else {
   itemNumber =  Math.floor(Math.random() * (fstore.getCount()));
   currentFriend = fstore.getAt(itemNumber);

   container.add({
     xtype: 'friendsdetail',
     rec: currentFriend,
     excuse: currentExcuse
   });
  }
}, this);
  1. Click Save
  2. Click Preview
  3. Test your application by adding a new contact and clicking on the Beer Me! button.

-- End of Exercise --

Page of 168
comments powered by Disqus