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-6a: Reading Data from a Server

Page of 168

Overview

During this lab, you will use Sencha Architect to develop a data model for storing information about your friends and their beer preferences. You will also read information about different beer brands into your application and display them in an on-screen list.

  • Define data models
  • Configure the locations of where to retrieve data
  • Parse JSON data into an Ext.data.Store
  • Display Store data in a List view.

Steps

Review the Documentation

  1. In your web browser, open the following URL and review the configs, properties, methods, and examples for the Ext.data.Model class:
    http://localhost/touch2/docs/#!/api/Ext.data.Model
Define the Beers Data Model
  1. Launch Sencha Architect
  2. Select File > Open Project
  3. Select /path/To/Arch101/mobile/lab/exercise6/exercise6.xds. Note that this is the solution from the prior walkthrough.
  4. Open http://webapps.figleaf.com/arch101/dataservices/mobile/beer.cfc?method=getBeerList in a web browser and review its data structure.
  5. Return to Sencha Architect.
  6. In the Project Inspector panel, click on the [+] and select Model.
  7. In the Project Inspector, click on MyModel and modify the following configuration properties:
    • userClassName: Beer
  8. In the Config panel, click on the [+] adjacent to the Fields property and enter the following field names:

    id,name,type,country

  9. Click the Finish button.
Define a Data Connection Proxy
  1. In the Config panel, click on the [+] adjacent to the Proxy property and select JsonP Proxy.
  2. In the Project Inspector, click on MyJsonPProxy and enter the following configuration property:
  3. Click on the [+] adjacent to Reader and select Json Reader.
  4. In the Project Inspector, click on the Beer model and add the following class to its requires property:

    Ext.data.proxy.JsonP
Define a Data Store
  1. Open your web browser to the following URL and review the examples, configs, and methods for the Ext.data.Store class:
    http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Store
  2. Return to Sencha Architect
  3. In the Project Inspector panel, click on the [+] and select Store
  4. In the Project Inspector, click on MyStore and enter the following configuration properties:
    • userClassName: Beers
    • storeId: Beers
    • model: Beer
    • autoLoad: true
Sort and Group the Data
  1. In the Config panel, click the [+] adjacent to the Sorters property.
  2. In the Project Inspector, click on the MySorter object and configure the following property:
    • property: type
  3. In the Project Inspector, click on the Beers store.
  4. In the Config panel, click the [+] adjacent to the Sorters property.
  5. In the Project Inspector, click on the MySorter1 object and configure the following property:
    • property: name
  6. In the Project Inspector, click on the Beers store.
  7. In the Config panel, click the [+] adjacent to the Grouper property.
  8. In the Project Inspector, click on the MyGrouper object.
  9. In the Config panel, click on the [+] adjacent to GroupFn
  10. In the Project Inspector, double-click on the groupFn object and enter the following code:
return record.get('type');
  1. Right-click on the Beers store and select Load Data.
  2. Hover your mouse over the eye icon. A tooltip should appear indicating that 22 records were loaded.
Define the Friends Model and Store
  1. In the Project Inspector panel, click on the [+] and select Model.
  2. In the Project Inspector, click on MyModel1 and modify the following configuration properties:
    • userClassName: Friend
  3. In the Config panel, click on the [+] adjacent to the Fields property and enter the following field names:

    firstName,lastName,address,zip,email,phone,favoriteBeer,
    lat,lng,distance

Define a Data Connection Proxy
  1. In the Config panel, click on the [+] adjacent to the Proxy property and select LocalStorage Proxy.
  2. In the Project Inspector, click on the LocalStorage proxy and configure the following attribute:
    • id: FriendsWithBeerContacts
  3. In the Project Inspector, click on the Friend model.
  4. Add the following class to its requires property:

    Ext.data.proxy.LocalStorage
Define a Data Store
  1. In the Project Inspector panel, click on the [+] and select Store.
  2. In the Project Inspector, click on MyStore1 and enter the following configuration properties:
    • userClassName: Friends
    • storeId: Friends
    • model: Friend
    • autoLoad: true
    • autoSync: true
Sort and Group the Data
  1. In the Config panel, click the [+] adjacent to the Sorters property.
  2. In the Project Inspector, click on the MySorter object and configure the following property:
    • property: lastName
  3. In the Project Inspector, click on the Friends store.
  4. In the Config panel, click the [+] adjacent to the Sorters property.
  5. In the Project Inspector, click on the MySorter1 object and configure the following property:
    • property: firstName
  6. In the Project Inspector, click on the Friends store.
  7. In the Config panel, click the [+] adjacent to the Grouper property.
  8. In the Project Inspector, click on the MyGrouper object.
  9. In the Config panel, click on the [+] adjacent to GroupFn
  10. In the Project Inspector, double-click on the groupFn object and enter the following code:
return record.get('lastName')[0];

Test your work
  1. Click the Save button.
  2. Click the Preview button.
  3. Open your browser's debugger and type the following statement to add a record to your Friends store:

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

  4. Type the following statement into your browser's console to output the contents of the HTML5 localStorage area:

    window.localStorage
  5. Review the contents of the window.localStorage output. You should see that the record that you added in step 52 now persists in local storage.
Page of 168
comments powered by Disqus