05 March 2011 ~ 10 Comments

Ext Store

This post will explain the basic configuration and usage of Ext Store.

Ext Store basics

An Ext Store can, basically, be considered a spreadsheet where you have columns with fields, and rows with data.

What the Ext Store offers us is the ability to:

  • Define a structure for our data
  • Methods to fetch and refresh data
    • From server
    • Runtime
  • Methods to access our data
  • The ability to save and delete data

Getting started with Ext Store

Different kind of Ext Stores

There are a variety of different stores available. Choosing the right one, depends on how your data is stored and how you plan to deliver it to your Ext Store.

You can choose between the following Ext Stores:

  • Ext ArrayStore
  • Ext DirectStore
  • Ext GroupingStore
  • Ext JsonStore
  • Ext XmlStore

These Ext Store flavours are really just simple helper classes to make the job of fetching data simpler.

We’ll briefly cover the differences between the Ext Stores before we continue.

Ext ArrayStore

The Ext.data.ArrayStore used to be SimpleStore. As the name implies, this store is primarily meant for reading array data. That is, if you have an array and want to use it as a Ext Store. Example:

    var myExampleData = [
        [1, 'John','Doe','johndoe@email.com'],
        [2, 'Jane','Doe','janedoe@email.com'],
        [3, 'Ola','Nordmann','ola@epost.no'],
        [4, 'Kari','Nordmann','kari@epost.no']
    ];

Let’s see how simple it is to make an Ext.data.ArrayStore to consume this:

    var myExampleArrayStore = new Ext.data.ArrayStore({
    fields: ['id','first_name','last_name','email'],
    data: myExampleData
    });

As with all the Ext stores there are lots of ways to configure them. This is the simplest form. Let’s see what we do.

    fields: ['id','first_name','last_name','email']

The fields property is a MixedCollection telling the Ext Store how each record (row in spreadsheet) is structured. Please note the order of the fields is the same as the order of the array.

The next line:

    data: myExampleData

Just passes the array containing our data to the Ext Store.

Ext DirectStore

The Ext.data.DirectStore is configured to use the Ext.data.DirectProxy and Ext.data.JsonReader to make it simpler to interact with a server side provider.

Ideally to use when you need to handle persistent data to and from server.

Ext GroupingStore

The Ext.data.GroupingStore i a special store usually used together with the special Ext GridPanel view called GroupingView. You can group records by a field.

I will not put any more attention to the Ext GroupingStore in this example.

Ext JsonStore

The Ext.data.JsonStore is made to make your life easier when making stores from JSON data.

Quick example:

    // SERVERSIDE PHP SCRIPT GENERATING JSON
    $myExampleData = array(
        array('id'=>'1','first_name'=>'John','last_name'=>'Doe','email'=>'johndoe@email.com'),
        array('id'=>'2','first_name'=>'Jane','last_name'=>'Doe','email'=>'janedoe@email.com'),
        array('id'=>'3','first_name'=>'Ola','last_name'=>'Nordmann','email'=>'ola@epost.no'),
        array('id'=>'4','first_name'=>'Kari','last_name'=>'Nordmann','email'=>'kari@epost.no')
    );
    echo json_encode($myExampleData);

The above serverside PHP code will produce the followng JSON string:

[
    {"id":"1","first_name":"John","last_name":"Doe","email":"johndoe@email.com"},
    {"id":"2","first_name":"Jane","last_name":"Doe","email":"janedoe@email.com"},
    {"id":"3","first_name":"Ola","last_name":"Nordmann","email":"ola@epost.no"},
    {"id":"4","first_name":"Kari","last_name":"Nordmann","email":"kari@epost.no"}
]

And the Ext JsonStore can look like this:

    var myExampleJsonStore = new Ext.data.JsonStore({
    	autoLoad: true,
    	url: '/examples/extjs-store/jsonServerExample.php',
    	fields: ['id', 'first_name','last_name','email']
    });

If we render this to a GridPanel it would produce the following output:

Ext XmlStore

The last helper class i the Ext.data.XmlStore. This one helps us creating an Ext Store from XML data.

Here is a quick example of Ext XmlStore usage. Let’s say you have an xml file like this:


    
        1
        John
        Doe
        johndoe@email.com
    
    
        2
        Jane
        Doe
        janedoe@email.com
    
    
        3
        Ola
        Nordmann
        ola@epost.no
    
    
        4
        Kari
        Nordmann
        kari@epost.no
    

The following Ext XmlStore would consume this file simple as a walk in the park:

var myExampleXmlStore = new Ext.data.XmlStore({
    	autoLoad: true,
    	url: '/examples/extjs-store/xmlExample.xml',
    	record: "person",
    	fields: ['id', 'first_name', 'last_name', 'email']
    });

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide


10 Responses to “Ext Store”

  1. declan 25 May 2011 at 06:39 Permalink

    Nils, Thanks for the great Ext tutorials. Keep em coming, expecially v4 😀

  2. Nils-Fredrik 25 May 2011 at 09:02 Permalink

    @declan, thanks! 🙂

    I am working on making all tutorials compatible with extjs 4.

  3. panega 26 June 2011 at 14:50 Permalink

    great tutorials…. 🙂

    hai, can you help me about CRUD ExtJS4 with PHP and MySql, you have tutorial about that….?

    thanks…

  4. Eric Jarvies 27 June 2011 at 14:33 Permalink

    How does one add Grouping to an Ext Designer project?

  5. Nils-Fredrik 27 June 2011 at 15:12 Permalink

    @EricJarvies, good uestion! I will check it out…

    Btw, you should follow me on twitter: twitter.com/nilsfredrik & twitter.com/aboutfrontend

  6. Ebru 8 July 2011 at 17:31 Permalink

    Hi,I need a help!!!
    I want to access json data with ExtJs 4 and I can not.
    http://www.codeproject.com/KB/webservices/ExtJS__WebServices.aspx In this site ,there are a project that can access Json data that is getting from web service but this exaple is doing with ExtJs 3 and Ext.data.JsonStore is used in it ,but there is no Ext.data.JsonStore in ExtJs 4 and How I can access json with ExtJs 4 ???
    Please help,,Thanks….

  7. Jackey Johns 24 November 2011 at 23:39 Permalink

    Another incredible website, will have to bookmark this one.

  8. Carlos 25 November 2012 at 21:01 Permalink

    Hi do you recommend using Date objects in a Ext JS, Spring, Hibernate archirecture or making the date a string with CCYYMMDD arrangement? From the tutorials I have sen the date format is avoided, I may accept it imposes some extra complexity.

  9. maksimer 26 November 2012 at 09:55 Permalink

    Hi Carlos,
    I recommmend keeping dates as real javascript dates.

    See my answer to your other question at http://aboutfrontend.com/extjs/extjs-renderer/comment-page-1/#comment-4908.

  10. binary options brokers usa 2015 23 November 2015 at 05:59 Permalink

    Generally the minimal buying and selling amount may be as low as $5 per commerce, and the utmost
    could be as much as $1,000 or $5,000 or extra.


Leave a Reply