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-6b: Displaying Data in a List

Page of 168

Overview

During this exercise, you will use Sencha Architect to output the contents of the Beers store and the contents of the Friends store to Ext.dataview.List components.

Steps

Review the Documentation

  1. In your web browser, open the following URL and review the configs, properties, methods, and examples for the Ext.dataview.List class:
    http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
Define the Beers List
  1. Launch Sencha Architect
  2. Select File > Open Project
  3. Select /path/To/Arch101/mobile/lab/exercise6/exercise6.xds.
  4. In the Project Inspector, right-click on Views > Main > Tab 3 and select Transform > Ext.dataview.List
  5. Configure the following properties:
    • title : Beers
    • store: Beers
    • onItemDisclosure: checked
    • grouped: checked
    • iconCls: search
  6. In the Config panel, click on the [+] adjacent to the itemTpl property.
  7. In the Project Inspector, double-click on itemTpl and enter the following code into the editor:

    {name} {type} <br />
    {country}


  8. Click Save
  9. Click Preview and browse the app. A grouped list of beers should appear under the Beers option.
  10. Return to Sencha Architect.
  11. Right-Click on Views > Beers and select Promote to Class
  12. In the Project Inspector, click on Views > MyList and configure the following properties:
    • userAlias: beerlist
    • userClassName: beer.List
  13. Click Save.
Define the Friends List View
  1. In the Project Inspector, click on Views > Main > Friends
  2. Configure the following properties:
    • layout: card
    • animation: fade
  3. From the Toolbox, drag a TitleBar and drop it onto the Friends view in the Project Inspector.
  4. Configure the following TitleBar attributes:
    • itemId: friendstoolbar
    • title: Friends with Beer
  5. From the Toolbox, drag a Button component an drop it onto the friendstoolbar in the Project Inspector.
  6. Configure the following Button properties:
    • align: right
    • itemId: btnAddFriend
    • iconCls: user_add
    • iconMask: checked
    • text: (none)
  7. From the Toolbox, drag a Button component an drop it onto the friendstoolbar in the Project Inspector.
  8. Configure the following Button properties:
    • align: left
    • itemId: btnBackToFriendList
    • ui: back
    • text: Back
    • hidden: checked
  9. From the Toolbox, drag a List view and drop it onto the Friends view in the Project Inspector.
  10. Configure the following List properties:
    • itemId: friendsList
    • emptyText: No Records Found.
    • store: Friends
    • grouped: checked
    • onItemDisclosure: checked
  11. Click the [+] adjacent to the Index Bar configuration property
  12. In the Project Inspector, double-click on the itemTpl property of the friendsList view.
  13. Enter the following code into the editor:

    {lastName}, {firstName}<br />{favoriteBeer}
  14. Click the Design button
  15. Click Save
  16. Click Preview
  17. Click the Friends tab in the App
  18. Open the browser's debugger and enter the following code to test the list view:

    Ext.getStore('Friends').add(
    {firstName: 'Steve', lastName: 'Drucker'}
    );


  19. After entering the code from step 32, you should see the name automatically appear in the list view.

-- End of Exercise --

Page of 168
comments powered by Disqus