RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building a Simple GridPanel in Ext JS

The GridPanel is the centerpiece widget for Ext JS, a cross-browser JavaScript library for building rich Internet applications. Learn the basics of loading data from a DataStore and setting up a simple GridPanel.

hen implementing GridPanels, I typically start by configuring the DataStore. The reason for this is because the configuration of the ColumnModel is directly related to the configuration of the DataStore. This is where we'll start too.

Editor's Note: This article is excerpted from the book Ext JS in Action by Jesus Garcia, published by Manning Publications, ISBN 9781935182115.

Setting Up an Array DataStore

In the following example, we're going to create a complete end-to-end DataStore that reads data already present in memory. This means that we're going to instantiate instances of all of the supporting classes from the Proxy to the Store. This exercise will help us see the working parts being configured and instantiated. Afterwards, we'll learn how to use some of the pre-configured DataStore convenience classes to make constructing certain types of stores easier with much less code.

Listing 1. Creating a DataStore that loads local array data

var arrayData = [                                                      (1)
     ['Jay Garcia',    'MD'],
     ['Aaron Baker',   'VA'],
     ['Susan Smith',   'DC'],
     ['Mary Stein',    'DE'],
     ['Bryan Shanley', 'NJ'],
     ['Nyri Selgado',  'CA']
 var nameRecord = Ext.data.Record.create([                            (2)
     {  name : 'name',  mapping : 1  },
     {  name : 'state', mapping : 2  }
 var arrayReader = new Ext.data.ArrayReader({}, nameRecord);          (3)
 var memoryProxy  = new Ext.data.MemoryProxy(arrayData);              (4)
 var store = new Ext.data.Store({                                     (5)
     reader : arrayReader,
     proxy  : memoryProxy

{1} Creating local array data
{2} Using Ext.data.Record.create to create a constructor for an Ext.data.Record
{3} Instantiating an ArrayReader
{4} Constructing a new MemoryPRoxy
{5} Building our Store

In the above listing, we implement the full gamut of DataStore configuration. We first start by creating an array of arrays, which is referenced by the variable arrayData {1}. Please pay close attention to the format the array data is in, as this is the expected format for the ArrayReader class. The reason the data is an array of arrays is because each child array contained within the parent array is treated as a singular record.

Next, we create an instance of data.MemoryProxy, which is what will load our unformatted data from memory and is referenced by the variable memoryProxy {2}. We pass in the reference arrayData as the only argument.

Next, we create an instance of data.Record {3} and reference it in the variable nameRecord, which will be used as the template to map our array data points to create actual records. We pass an array of object literals {4} to the Record.create method, which is known as the 'fields' and details each field name and its mapping. Each of these object literals are configuration objects for the Ext.data.Field class, which is the smallest unit of data managed data within a Record. In this case, we map the field 'personName' to the first data point in each array record and the 'state' field to the second data point.

NOTE: Notice how we're not calling new Ext.data.Record(). This is because data.Record is a special class that is able to create constructors by using its create method, which returns a new record constructor. Understanding how data.Record.create works is essential to performing additions to a DataStore.

We then move on to create an instance of ArrayReader {5}, which is what's responsible for sorting out the data retrieved by the proxy and creating new instances of the record constructor we just created. From a 30,000 foot view, the ArrayReader reads each Record, it creates a new instance of nameRecord by calling new nameRecord, passing the parsed data over to it, which is then loaded to the store.

Lastly, we create our DataStore for which we pass the reader and proxy we created, which completes the creation of our array DataStore. This completes our end-to-end example of how to create a store that reads array data. With this pattern, you can change the type of data the store is able to load. To do this, you swap out the ArrayReader with either a JsonReader or an XmlReader. Likewise, if you wanted to change the data source, you can swap out the MemoryProxy for another such as the HttpProxy, ScriptTagProxy or DirectProxy.

Using convenience classes can make our lives a little easier. If we want to recreate the Store above using the ArrayStore convenience class, this is what our code would look like using our arrayData from above.

  var store = new Ext.data.ArrayStore({
    data   : arrayData,
    fields : ['personName', 'state']

Just as we see in the above example, we use shortcut notation for the fields to create an instance of Ext.data.ArrayStore. We achieve this by passing a reference of the data, which is our arrayData, and a list of fields, which provide the mapping. Notice how the fields property is a simple list of strings? This is a completely valid configuration of field mappings because Ext is smart enough to create the name and index mapping based on the string values passed in this manner. In fact, you could have a mixture of objects and strings in a fields configuration array. For instance, the following configuration is completely valid:

   fields : [ 'fullName', { name : 'state', mapping : 2} ]

Having this flexibility is something that can be really cool to leverage. Just know that having a mixture of field configurations like this can make the code a bit hard to read.

Using this convenience class saved us the step of having to create a proxy, record template and reader to configure the store. Usage of the JsonStore and XML Store are equally as simple, which we'll learn more about later. Moving forward, we'll be using the convenience classes to save us time.

For now we'll move on to creating the ColumnModel, which defines the vertical slices of data that our GridPanel will display along with our GridView component.

Courtesy of Manning Publications. All rights reserved.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date