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-7b: Navigating Between Views

Page of 168

Overview

During this exercise, you will define a controller and event listeners to enable a user to navigate between the Friends List view and the data entry form that you created in Exercise 2-7a.

  • Toggle the display of a view
  • Populate a form with data from a model

Steps

Create a Controller

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise7/exercise7.xds.
  3. In the Project Inspector's title bar, click on the [+] and select Controller.
  4. Configure the following properties:
    • userClassName: Friends
    • models: Friend (Note: click the Remove button when prompted)
    • stores: Friends (Note: click the Remove button when prompted)
Define Controller Refs
  1. From the Toolbox, drag a Controller Reference and drop it onto the Friends controller in the Project Inspector.
  2. Configure the following properties:
    • ref: friendsView
    • selector: tabpanel > #friends
  3. Repeat steps 5-6 for the following refs:
    • ref: btnAddFriend
      selector: button#btnAddFriend
    • ref:btnBackToFriendList
      selector: button#btnBackToFriendList
    • ref: friendForm
      selector: formpanel#friendForm

Toggle the Display of the Form

  1. From the Toolbox, drag a Basic Function and drop it onto the Friends controller.
  2. Configure the following property:
    • fn: onGoToForm
  3. Enter the following code to bring the friendform forward in the card view:
// hide add button
this.getBtnAddFriend().setHidden(true);
// show "back" button
this.getBtnBackToFriendList().setHidden(false);
// toggle the view
this.getFriendsView().setActiveItem(1);
  1. From the Toolbox, drag a Basic Function and drop it onto the Friends controller.
  2. Configure the following property:
    • fn: onGoToList
  3. Enter the following code to bring the friends list to the top of the card view:
// show add button
this.getBtnAddFriend().setHidden(false);
// hide back button
this.getBtnBackToFriendList().setHidden(true);
// toggle visability of the list view
this.getFriendsView().setActiveItem(0);

Create Listeners for Button Tap Events
  1. In the Project Inspector, click on Views > Main > Friends > friendstoolbar > btnAddFriend
  2. In the Config panel, click on the [+] adjacent to the Event Bindings property and select Basic Event Binding
  3. Select the tap event.
  4. In the Project Inspector, right-click on the onBtnAddFriendTap tap event and select Convert to Action > Friends
  5. Modify the following config property:
    • controlQuery: btnAddFriend
  6. In the Project Inspector, double-click on the onBtnAddFriendTap event and enter the following code into the editor:
this.getFriendForm().setRecord(
 Ext.create('FriendsWithBeer.model.Friend')
);
this.getFriendForm().reset();
this.onGoToForm();
  1. In the Project Inspector, click on Views > Main > Friends > friendstoolbar > btnBackToFriendList
  2. In the Config panel, click on the [+] adjacent to the Event Bindings property and select Basic Event Binding
  3. Select the tap event.
  4. In the Project Inspector, right-click on the onBtnBackToFriendListTap tap event and select Convert to Action > Friends
  5. Modify the following config property:
    • controlQuery: btnBackToFriendList
  6. Click the Code button
  7. Enter the following code to allow the user to toggle back to the list of friends:

    this.onGoToList();

  8. Click Save.
  9. Click Preview. Test the buttons on the Friends toolbar.
  10. Return to Sencha Architect.
Page of 168
comments powered by Disqus