---

• Next »
• « Previous

Chained Store:

Ext JS 5 introduced a new type of store called chained store. A chained store is linked to a source store. The records come from the source store. A chained store defines sorters and filters which act independently without having any impact on the source store. However, filters and sorters applied on the source store can have an impact on chained stores as well.

Chained store can be defined in a separate JS file as well as in a ViewModel.

Let's look at an example of how a new chained store can be created that does not have an impact on the source store.

In our example, we will create source store and chained store. We will also create three simple grids that display data from these stores. Our example will look like below.

First, create the Student store which will act as a source store as show below.

Ext.define('SchoolApp.store.Student', {
    extend: 'Ext.data.Store',
    model: 'SchoolApp.model.Student',
   
    autoLoad: true,
    sorters: [{
        property: 'firstName',
        direction: 'ASC'
    }]

}); 

Now, create chained store named 'SchoolApp.store.StudentChainedStore' in the same folder as shown below.

Ext.define('SchoolApp.store.StudentChainedStore', {
    extend: 'Ext.data.ChainedStore',
    source:'SchoolApp.store.Student',
    sorters: [{
        property: 'firstName',
        direction: 'desc'
    }]

});

In the above chained store, notice that we have specified "source" config which is "SchoolApp.store.Student". Also, we have specified separate sorter in the chained store.

Now, you can bind this store with the grid as usual using "store" config of grid.

You will see that the grid which is attached to chained store, displays data in descending order whereas the grid with main store displays data in ascending order.

However, editing data in any one of the grids affects all grids

Live Example

---

---

• Next »
• « Previous