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

Reading Data from Web Services

Page of 168
Models and Stores that you will define in this exercise

Overview

In this lab, you will perform the following tasks:

  • Define data models
  • Define proxies that read from paginated data sets
  • Define data stores

Description

During this exercise you will implement the data models and stores that you will use throughout your application.

The Sponsor model and store will read in data about members of the United States Congress from a remote application server.

The Earmark model and its related store will read in data about money distributions made by Congress.

The State model and Store simply contains an embedded array of the names of all fifty United States and their associated two character abbreviation and will ultimately be used to populate a combo box.

Steps

Open the Project
  1. Run Sencha Architect
  2. Select File > Open Project...
  3. Select /path/to/arch101/desktop/lab/exercise3/exercise3.xds. Note that this is the solution from the prior walkthrough.

Define the Sponsor Model

  1. Open the following URL in your web browser and review the structure of the JSON data:

    http://www.senchatraining.com/arch101/dataservices/desktop/sponsor.cfc?method=wsBigJSONP
  2. Return to Sencha Architect
  3. Click on the [+] button on the Project Inspector Title Bar and select Model.
  4. In the Project Inspector, click on MyModel
  5. Configure the following properties:
    • userClassName: Sponsor
    • idProperty: IDSPONSOR
  6. In the Config panel, click on the [+] adjacent to the Fields property.
  7. Enter the following fieldnames (case-sensitive):

    IDSPONSOR,HONORIFIC,FIRSTNAME,LASTNAME,PARTY,STATE

  8. In the Config panel, click on the [+] adjacent to the Proxy property and select JsonP Proxy.
  9. In the Project Inspector, click on the MyJsonPProxy object and configure the following property:
    • url: http://webapps.figleaf.com/arch101/dataservices/desktop/sponsor.cfc?method=wsBigJSONP
  10. In the project inspector, click on the [+] adjacent to the Reader property and select Json Reader.
  11. Configure the following properties:
    • totalProperty: RESULTS
    • successProperty: SUCCESS
    • root: ROWS
Define the Sponsor Store
  1. Click on the [+] button on the Project Inspector Title Bar and select Store.
  2. In the Project Inspector, click on the MyStore store.
  3. Configure the following Ext.data.Store properties:
    • userClassName: Sponsors
    • autoLoad: checked
    • storeId: Sponsors
    • pageSize: 600
    • model: Sponsor
    • remoteFilter: true
  4. In the Project Inspector, right-click on the Sponsors store and select Load Data.
  5. Hover your mouse over the eye button adjacent to the Sponsors store. Confirm that a tooltip appears indicating that 575 records were loaded.
  6. Click on the eye button adjacent to Sponsors. A window should appear containing the formatted JSON data that had been read from the app server.

Define the Earmarks Model

  1. Open the following URL in your web browser and review the structure of the JSON data:


    http://webapps.figleaf.com/arch101/dataservices/desktop/earmark.cfc?method=wsBigJSONP
    Note that the SPENDINGCOMMITTEE and SPONSOR properties for each record are encoded as nested objects.

  2. Return to Sencha Architect.
  3. Click on the [+] button on the Project Inspector title bar and select Model.
  4. In the Project Inspector, click on MyModel1
  5. Configure the following properties:
    • userClassName: Earmark
    • idProperty: EARMARK_ID
  6. In the Config panel, click on the [+] adjacent to the Fields property.
  7. Enter the following fieldnames (case-sensitive):

    EARMARK_ID,EARMARK_DESCRIPTION,ENACTED_YEAR,AGENCY_TITLE,
    BUREAU_TITLE,AMT_CONF,SPONSOR,SPENDINGCOMMITTEE,
    SPONSORNAME

Define a Convert Function

  1. In the Project Inspector, click on the SPONSORNAME field.
  2. In the Config panel, click the [+] adjacent to the convert property.
  3. In the project inspector, double-click on the convert function and enter the following code into the Code Editor:
return Ext.String.format("{0}, {1}", 
                         rec.get('SPONSOR').LASTNAME,
                         rec.get('SPONSOR').FIRSTNAME);
  1. Click the Design button.
Define the Earmark Proxy
  1. In the Project Inspector, click on the Earmark model.
  2. In the Config panel, click the [+] adjacent to the Proxy property and select JsonP Proxy.
  3. In the Project Inspector, click on the MyJsonPProxy1 object and configure the following property:
  4. In the project inspector, click on the [+] adjacent to the Reader property and select Json Reader.
  5. Click on the MyJsonReader1 object.
  6. Configure the following properties:
    • totalProperty: RESULTS
    • successProperty: SUCCESS
    • root: ROWS
Define the Earmark Store
  1. Click on the [+] button on the Project Inspector Title Bar and select Store.
  2. In the Project Inspector, click on the MyStore1 store.
  3. Configure the following Ext.data.Store properties:
    • userClassName: Earmarks
    • storeId: Earmarks
    • pageSize: 600
    • model: Earmark
    • groupField: SPONSORNAME
    • remoteSort: checked
    • remoteFilter: checked
  4. In the Project Inspector, right-click on the Earmarks store and select Load Data.
  5. Hover your mouse over the eye button adjacent to the Earmarks store. Confirm that a tooltip appears indicating that 600 records were loaded.
  6. Double-click on the eye button adjacent to Earmarks. A window should appear containing the formatted JSON data that had been read from the app server.
Define a Store with Hardcoded Data
  1. Click on the [+] button on the Project Inspector title bar and select Store.
  2. In the Project Inspector, click on the MyStore2 store.
  3. Configure the following Ext.data.Store properties:
    • userClassName: States
    • storeId: States
  4. In the Config panel, click the [+] adjacent to the Fields property and enter the following field names:

    abbr,label

  5. In the Config panel, click the button adjacent to the data property.
  6. Copy and paste the content of /arch101/snippets/states.json into the code editor in Sencha Architect.
  7. Click on the Design button
  8. In the Project Inspector, right-click on the States store and select Load Data.
  9. Hover your mouse over the eye button to verify that 50 records were loaded.

-End of Exercise-

Page of 168
comments powered by Disqus