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
02/05/2018

Exercise 2-8: Implementing Master-Detail Reporting

Page of 168

Overview

During this lab, you will implement a NavigationView to dynamically instantiate views in order to implement a master-detail reporting interface.

  • Configure an Ext.NavigationView
  • Filter data in a Store
  • Dynamically create and destroy views

Steps

Define the Navigation View

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise8/exercise8.xds.

    Note: This is the solution from the prior exercise.
  3. From the Toolbox, drag a Navigation View component and drop it onto the Views category of the Project Inspctor.
  4. Configure the following properties:
    • userClassName: beer.Beer
    • userAlias: beer
  5. In the Project Inspector, click on the beer.List view and drop it onto the beer.Beer view.
  6. Click the Link button
  7. In the Project Inspector, click on the beer.list1 view and configure the following property:
    • title: Beers
  8. In the Project Inspector, right-click on the Views > Main > Beers view and select Delete
  9. In the Project Inspector, drag the beer.Beer view and drop it onto the Main view.
  10. Click on the Link button
  11. Configure the following Ext.navigation.View properties:
    • title: Beers
    • iconCls: search
  12. Click Save
  13. Click Preview.
  14. Verify that clicking on the Beers tab displays the navigation view containing the list of beers.
  15. Return to Sencha Architect.

Define the Friends with Beer List

  1. From the Toolbox, drag a List component and drop it onto the Views category in the Project Inspector.
  2. Configure the following properties:
    • userClassName: beer.FriendsList
    • userAlias: beerfriendslist
    • store: Friends
    • onItemDisclosure: checked
  3. In the Project Inspector, double-click on the beer.FriendsList itemTpl component and enter the following code:

    {firstName} {lastName}<br />
    Distance: {distance} mi


    Note: You will perform the distance calulation in exercise 2-9.
  4. Click the Design button.
  5. Click Save.

Filter the Persons Store and Instantiate the Friends with Beer List

  1. Click on the [+] on the Project Inspector toobar and select Controller.
  2. In the Project Inspector, click on the MyController2 controller and configure the following property:
    • userClassName: Beers
    • models: Beer (when prompted, click the Remove button)
    • stores: Beers (when prompted, click the Remove button)
    • views: beer.Beer, beer.List, beer.FriendsList (when prompted, click Remove)
  3. In the Project Inspector, click on Views > beer.List
  4. In the Config panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding
  5. Select the itemTap event
  6. In the Project Inspector, right-click on the onListItemTap event and select Convert to Action > Beers
  7. Configure the following event listener properties:
    • controlQuery: beer > beerlist
    • fn: onBeerListItemTap
  8. Enter the following code to duplicate and filter the Friends store as well as push a new instance of the beer.friendsList view onto the NavigationView:
// create a new store
if (!this.filteredStore) 
 this.filteredStore = Ext.create('FriendsWithBeer.store.Friends');

// clear previous filters
this.filteredStore.clearFilter();

// filter based on user selection
this.filteredStore.filter(
  'favoriteBeer',
  record.get('name')
);

// load data into the store
this.filteredStore.load();

// push list view onto navigation view stack
dataview.up('navigationview').push({
    xtype:  'beerfriendslist',
    title: 'Friends with ' + record.get('name'),
    store: this.filteredStore
});
  1. Click Save
  2. Click Preview
  3. Test the app by adding a friend and then going to the Beer module and selecting the beer that you related to your friend. Your friend's name should appear in the list.
Destroy Views on Navigation List Pop
  1. In the Project Inspector, click on the Beers controller
  2. In the Config panel, click on the [+] adjacent to the References property and enter the following information:
    • Reference Name: searchByBeerView
    • Selector: beer
  3. In the Config panel, click on the [+] adjacent to the Actions property and select Controller Action
    • Choose Ext.NavigationView as the target type
    • Choose pop as the event
  4. In the Project Inspector, click on the onNavigationviewPop event handler and modify the following configuration property:
    • controlQuery: searchByBeerView
  5. Click on the Code button
  6. Enter the following script to ensure that the popped views are destroyed:

    view.destroy();

  7. Click Save
  8. Click Preview
  9. Test your application.

-- End of Exercise --

Page of 168
comments powered by Disqus