Sencha Inc. | HTML5 Apps

Working with Data Stores in Ext Designer

Published Jul 08, 2011 | The Sencha Dev Team | Tutorial | Easy
Last Updated Feb 25, 2013

What is a Data Store?

Data Stores provide a client-side data cache for UI components. A Data Store retrieves data from a source such as an XML file and makes the data available for display within a UI component such as a GridPanel.

To do this, a Store uses a DataReader to read structured data from a source such as an XML file or JSON packet and creates an array of Record objects that can be accessed by the UI components. The read requests are handled by a DataProxy that knows how to access the source and pass the data to the DataReader.

When you set up a Data Store, you specify what format the data is in and where it's located. You map fields in the data source to the fields that you want to make available to your UI components, and then configure the components to use those fields.

Using Data Stores in Designer

To display data in a UI component using a Data Store:

  1. Select the type of Store that matches the format of your source data: Json Store, Array Store, XML Store, or Direct Store.
  2. Specify where you're going to read the data from in the Store's url attribute.
  3. Add fields to the Data Store and map them to the source data.
  4. Load the data into the Data Store.
  5. Configure the UI component to use specific fields from the Data Store.

Choosing a Store Type

In Designer, you can choose from several types of Data Stores. Each type defines the kind of DataReader and DataProxy that will be used to retrieve and parse data from the source:

  • Json Store—retrieves data from a JSON packet using a JsonReader and HTTPProxy.
  • Array Store—retrieves data from a local array using an ArrayReader and MemoryProxy.
  • XML Store—retrieves data from an XML file using XmlReader and HTTPProxy.
  • Direct Store—retrieves data from a server-side Provider using a JsonReader and DirectProxy.

To add a Store in Designer:

  1. Select the Data Stores tab.
  2. Choose the type of store you want to add.




Cross-Domain Requests

It's important to note that an HTTPProxy can only retrieve data from within the same domain. This means that you cannot create a Json Store or XML Store to get data from a remote source. For cross-domain requests, you have to use a ScriptTagProxy.

A JsonP Store type that uses ScriptTagProxy to access Json packets will be provided in Designer to facilitate cross-domain requests.

Specifying the Location of the Source Data

When you create a store, you need to specify the location of the source data. In Designer, the location you specify in a Store's url attribute is relative to the URL prefix that's specified in the project's preferences.

To set the URL prefix for a project:

  1. Select Edit Preferences from the Edit menu.

  2. Enter the URL prefix that should be prepended to the url attributes you specify for individual components.




To specify the location of the source data for a Store:

  1. Select the Store in the Data Stores tab.
  2. Set the Store's url attribute to point to the source data.




  3. For most Store types, you also need to set the root attribute to tell the reader the name of the property from which to read the data.




Mapping Data Fields

You need to add a field to your Store for each element you want to load from the source.

To add fields to your Store:

  1. Right-click the store in the Data Stores tab.
  2. Select Add Fields and the number of fields you want to add to the store.


  3. Set each field's name attribute.


By default, each field in your data source is mapped to field of the same name in the source data. However, you can map a field to any arbitrary source field by specifying the mapping attribute in the field configuration. For example, you might want to drop underscores, change the capitalization from the way it appears in the source data, or map to a field with a completely different name.

To map a field to a source field of a different name:

  1. Select the field in the Data Stores tab.
  2. Set the field's mapping attribute to identify the source data you want to map to the field.




You can also control how the data read from a source field is formatted. For example, to specify how you want to display the contents of a date field, you specify the dateFormat attribute in the field configuration. This is a PHP-style date formatting string, for more information see Date.

Similarly, you can set the sortType attribute to control how the field is treated when sorting. You specify one of the predefined SortType functions, or a define and use a custom sort function.

Loading Data into a Store

You can automatically load data into a store by enabling it's autoLoad attribute. This causes the store's load method to be called automatically when it's created.

In Designer, you can force data to be loaded from the source by clicking Load Data. If the data cannot be read from the source, an error message is displayed that contains the location where Designer expected to find the source data.

If you do not enable autoLoad, your application will need to explicitly call load on the store to load the data.

Binding a Store to a UI Component

Once you've set up your Data Store, binding it to a UI component to display the data is easy:

  1. Click the flyout configuration button on the component.
  2. Select the Data Store you want to use.




  3. Configure the component to use the data from the store. This varies depending on the type of component. For example, for a DataGrid you set the dataIndex of each column to the field that you want to display. Note that the data is displayed immediately when you set the dataIndex.




    For a ComboBox, you specify the itemId and name attributes to correspond to the appropriate fields in your Data Store.

The data should display immediately in the UI component. If it doesn't:

  • Make sure you can load the store. The most common problem is incorrectly specifying the path to the store.
  • Check your Data Store configuration. Have you defined the fields you're trying to display? If needed, is the root specified correctly?
  • Check the component configuration. Have you correctly specified which fields you want to display?

Note: Currently, data from a connected store is not displayed in the Designer's Preview mode. To see how the data displays within a web page, export your project and access it through your Web browser.

Examples

The following examples show how to create a Data Store in Designer and connect it to various types of source data.

Using a Json Store

  1. Create the Json file that contains the data you want to load. For this example, create a file called customers.json that contains the following data:

    {
    customers: [
    	{name: "Bradley Banks", age: 36, zip: "10573"},
    	{name: "Sarah Carlson", age: 59, zip: "48075"},
    	{name: "Annmarie Wright", age: 53, zip: "48226"}
    ]	
    }
    
  2. Save the customers.json file on the host specified by the project's URL Prefix. For example, if the URL prefix is set to http://localhost, make the file available at http://localhost/data/customers.json.
  3. In Designer, go to the Data Stores tab and select Add Json Store.
  4. Set the root attribute of the Store to customers. This matches the name of the array specified in the Json file that contains the data you want to load.
  5. Set the Store's idProperty attribute to name.
  6. Set the Store's url attribute to the location of the source file on the host specified by the project's URL Prefix. In step 2, you saved the Json store in the data directory on localhost, so you need to set the url attribute to data/customers.json.
  7. Right-click the Store component and select Add Fields > 3 fields—one for each of the name:value pairs you want to access from the elements in the customers array.
  8. Set the name of the first field to name.
  9. Set the name of the second field to age and set it's type to int. Setting the type field enables the field to be sorted correctly.
  10. Set the name of the third field to zipcode. Since this is different from the name used to reference this value in the Json file, you also need to set the field's mapping attribute to zip.
  11. With the store selected, click Load data. When the data is successfully loaded from the source, a status message indicating the number of fields loaded is displayed in the Data Stores tab. If the data cannot be loaded, an error message displays that includes the URL from which Designer attempted to load the data.

Now you can bind your Store to a UI component and use the fields in the store to dynamically load data into the component.

Using an XML Store

  1. Create an XML file that contains the data you want to load. For this example, create a file called products.xml that contains the following data:
    <Products xmlns="http://example.org">
    	<Product>
    		<Name>Widget</Name>
    		<Price>11.95</Price>
    		<ImageData>
    			<Url>widget.png</Url>
    			<Width>300</Width>
    			<Height>400</Height>
    		</ImageData>
    	</Product>
    	<Product>
    		<Name>Sprocket</Name>
    		<Price>5.95</Price>
    		<ImageData>
    			<Url>sc.png</Url>
    			<Width>300</Width>
    			<Height>400</Height>
    		</ImageData>
    		</Product>
    	<Product>
    		<Name>Gadget</Name>
    		<Price>19.95</Price>
    		<ImageData>
    			<Url>widget.png</Url>
    			<Width>300</Width>
    			<Height>400</Height>
    		</ImageData>
    	</Product>
    </Products>
    
  2. Save the products.xml file on the host specified by the project's URL Prefix. For example, if the URL prefix is set to http://localhost, make the file available at http://localhost/data/products.xml.
  3. In Designer, go to the Data Stores tab and select Add XmlStore.
  4. Set the Store's url attribute to the location of the source file on the host specified by the project's URL Prefix. In step2, you saved the XML file in the data directory on localhost, so you need to set the url attribute to data/products.xml.
  5. Set the record attribute to the name of the XML element that contains the data you want to load, Product.
  6. Right-click the Store and select Add Fields > 3 fields—one for each of the subelements you want to access for each Product.
  7. Set the name of the first field to name and its mapping attribute to Name. Note that the mapping is case sensitive and must match the element name.
  8. Set the name attribute of the second field to price, its mapping attribute to Price, and its type to float.
  9. Set the name attribute of the third field to imageUrl and the mapping attribute to ImageData > Url. Note that this uses a DomQuery selector to access the Url subelement of ImageData.
  10. Make sure the Store is selected and click Load data. When the data is successfully loaded from the source, a status message indicating the number of fields loaded is displayed in the Data Stores tab. If the data cannot be loaded, an error message displays that includes the URL from which Designer attempted to load the data.

Now you can bind your Store to a UI component and use the fields in the store to dynamically load data into the component.

Using an Array Store

  1. Create a file that contains the array data you want to load. For this example, create a Json file called contacts.json that contains the following data:
    [
    ["Ace Supplies", "Emma Knauer", "555-3529"],
    ["Best Goods", "Joseph Kahn", "555-8797"],
    ["First Choice", "Matthew Willbanks", "555-4954"]
    ]
    
  2. Save the products.xml file on the host specified by the project's URL Prefix. For example, if the URL prefix is set to http://localhost, make the file available at http://localhost/data/contacts.json.
  3. In Designer, go to the Data Stores tab and select Add Array Store.
  4. Set the Store's idIndex property to 0. This indicates that the first element in each row array (the contact name) should be used as the index.
  5. Set the Store's url attribute to the location of the source file on the host specified by the project's URL Prefix. In step 2, you saved the Json file in the data directory on localhost, so you need to set the url attribute to data/contacts.json.
  6. Right-click the Store component and select Add Fields > 3 fields—one for each element you want to reach from the row arrays in the source file.
  7. Set the name of the first field to name.
  8. Set the name of the second field to contact.
  9. Set the name of the third field to phone.
  10. With the Store selected, click Load data. When the data is successfully loaded from the source, a status message indicating the number of fields loaded is displayed in the Data Stores tab. If the data cannot be loaded, an error message displays that includes the URL from which Designer attempted to load the data.

Now you can bind your Store to a UI component and use the fields in the store to dynamically load data into the component.

Share this post:
Leave a reply

Written by The Sencha Dev Team

2 Comments

Tuesday

3 years ago

I told my ganrodmther how you helped. She said, ?bake them a cake!?

Libby

2 years ago

What a great resorcue this text is.

Leave a comment:

Commenting is not available in this channel entry.