ExtJS Store

About ExtJS Store

ExtJS Store is the glue between the data you see and the data itself.
Store represent model instances or collection of data which can be loaded and than manipulated. ExtJS store is one of ExtJS No.1 features. Data loaded with store can be grouped, sorted, filtered and much more.. now we can imagine ExtJS grids and features like sorting, filtering etc.
In most cases we bind a store to a component like ExtJS grid or combobox for example and the component will be populated with store data. We will see below how easy is to do that. We will also talk about ExtJS Proxy, because store uses proxy (another important segment) to load data. Lets start…

How to create ExtJS Store

Here is simple example that you can copy/paste to your application launch and run it.

Lets create ExtJS Store with inline data

We can see in our store above next configuration properties:

• storeId  – we use it as an unique store identifier, so we can later call our store in a easy and comfort way
• fields – our current ExtJS store is without model configuration. In general fields can be used in model config than model can be assigned to store. ExtJS will automatically create Ext.data.Model for our fields config
• data – JSON data that will be shown in our grid. In this example we use inline data. ExtJS proxy can be configured to use data from server.
• proxy – very important part, this is where we define how store will load data. I think config is pretty simple and understandable. Proxy type is memory for example, that means it will load data from memory. I mentioned proxy types here a bit.

Let’s create component that will use our store and represent the data

We added simple ExtJS grid. I will write extensive post about grids..because it’s a very good ExtJS component that makes ExtJS primary choice for many companies.

In short, some grid config:

• title – grid’s title
• store – this is the config where we bind a store to this grid. Ext.data.StoreManager can find this store because we gave an id to our store.
• other properties like columns, width and height are standard grid properties

Power of ExtJS store

Now when we have example to play with we can add some config and test various benefits of ExtJS store API.

Try adding next properties to store one by one and test what will happen with data.
Add this

sorters: [‘name’,’phone’],

This will sort our ExtJS grid on first load by name and phone.

Or try to add next to store definition

filters: {
property: ‘name’,
value : ‘Homer’
}

than check the output data.

Big advantage is that you can use store API to filter, sort, load the data dynamicaly, for example on button click etc. We will see in events section how to do something on users action.

Good example can be click on grid’s header.. You can notice that data will sort. What exactly happens here is that store sorted data than applied itself to our grid again. So every data manipulation happens in ExtJS store.

Diversity of Stores

We used basic store which is Ext.data.Store. ExtJS is pretty robust framework so sencha team always provide us some extensions or helpers extended from basic classes.

Good examples are:

Ext.data.ArrayStore which makes it easier to work with arrays.

Ext.data.XmlStore enables creating Ext.data.Stores form XML data in a easy way. Of course logic behind that is not so simple. Ext.data.XmlStore uses Ext.data.reader.Xml. ExtJS Readers are actually used by ExtJS proxy. Ext.data.reader.Xml reads XML data sent from the server.

Ext.data.DirectStore is my choice when it comes to using server data and stores. It uses Ext.direct.Manager to interact with server, Ext.data.proxy.Direct and Ext.data.reader.Json to fetch and read the data. We will talk a lot about ExtJS direct, because it’s a great way to get the data in combination with backend services made in PHP, Node JS, Java or similar.

Ask or suggest what can we add to this post so it will be easier to understand for and ExtJS begginer.