Sencha

Working with Data Stores

in Designer

Sencha, Inc.
www.sencha.com
525 University Avenue, Suite 23
Palo Alto, CA 94301

Copyright © 2010, Sencha, Inc. All Rights Reserved.

 Working with Data Stores in Designer

Contents
What is a Data Store? .............................................................................................................1
Using Data Stores in Designer.................................................................................................. 1
Choosing a Store Type....................................................................................................... 1
Cross-Domain Requests................................................................................................ 2
Specifying the Location of the Source Data........................................................................... 2
Mapping Data Fields.......................................................................................................... 4
Loading Data into a Store................................................................................................... 5
Binding a Store to a UI Component ..................................................................................... 6
Examples.............................................................................................................................. 7
Using a Json Store............................................................................................................. 7
Using an XML Store .......................................................................................................... 8
Using an Array Store .........................................................................................................9

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.
1
 Working with Data Stores in Designer
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.

2
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 config 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:
<?xml version="1.0" encoding="UTF-8"?>
<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.