ExtJS Note Store

The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained Within it.

The store class encapsulates the cache of the model object on the client. The store loads data by proxy and provides functions to sort, filter, and query the model instance.

Creating a Store is easy-we just tell it the Model and the Proxy to use for loading and saving its data:

Creating a store is simple--we just need to tell it model and proxy:

//Set up a model to use in our StoreExt.define (' User ', {extend:' Ext.data.Model ', fields: [{name:' FirstName ', type: ' String '}, {name:' LastName ', type: ' String '}, {name:' Age ', type: ' int '}, {name:' Eyecolor ', type: ' String '}     ] }); varMystore = ext.create (' Ext.data.Store '), {model:' User ', Proxy: {type:' Ajax ', URL:'/users.json ', Reader: {type:' JSON ', Root:' Users '}}, AutoLoad:true });

In the example above we configured a AJAX proxy to load data from the URL '/users.json '. We told our proxies to use Ajsonreader to parse the response from the server into Model object-see the docs on Jsonreader For details.

In the example above, we configured an AJAX proxy to load data from '/users.json '. We tell the agent to use Jsonreader to parse the response of the service side to the model object. See the docs on Jsonreader for details

Inline Data Inline

Stores can also load data inline. Internally, Store converts each of the objects we pass in as data into Model instances:

The store can load data inline. Internally, the store transforms each of our incoming objects into the model instance:

Ext.create (' Ext.data.Store ', {     ' User ',     data: [         ' Ed ',    lastName: ' Spencer '},          ' Tommy ', lastName: ' Maintz '},         ' Aaron ', lastName: ' Conran '},         ' Jamie ', LastName: ' Avins '}     });

Loading inline data using the method above is great if the data was in the correct format already (e.g. it doesn ' t need Be processed by a reader). If your inline data requires processing to decode the data structure, use a memoryproxy instead (see the Memoryproxy docs For an example).

If the data format is correct (we do not need to provide reader for processing), then it is good to use inline data. If inline data needs to parse the data format, use Memoryproxy .

Additional data can also be loaded locally using Add.

Additional data can be loaded by the Add method.

Dynamic Loading Dynamically loaded

Stores can dynamically updated by calling the Load method:

The store can be dynamically updated by calling the Load method:

store.load ({    params: {        3,        ' user '    },    function( Records, operation, success) {        // do something after the load finishes    },      This });

Here a bunch of arbitrary parameters are passed along with the load request and a callback function are set up to do Somethi Ng after the loading are over.

In this example, a set of arbitrary parameters is passed through the Load method, and the callback function can do something at the end of the load.

Loading Nested Data Loading nesting

Applications often need to load sets of associated Data-for example a CRM system might load a User and her Orders. Instead of issuing an AJAX request for the User and a series of additional AJAX requests for each Order, we can load a NES Ted DataSet and allow the Reader to automatically populate the associated models. Below is a brief example, see the Ext.data.reader.Reader intro docs for a full explanation:

Apps often need to load a set of related data--for example, the CRM system will load users and its orders. One way is to get the user through an AJAX request, get each order through a series of additional requests, we can load a nested dataset, and let reader automatically assemble the relevant model, see Ext.data.reader.Reader:

var store = ext.create (' Ext.data.Store ', {     true,     ' User ',     Proxy : {         ' ajax '         , ' Users.json ',             reader             : {' json ', ' users '          }     } });

Which would consume a response like this:

We will consume such a response:

{     "users": [{         "id": 1,         "name": "Ed",         "Orders": [{              "id": Ten,             "Total": 10.76,             "status": "Invoiced"        },{             "id": 11 ,             " Total ": 13.45,             " status ":" Shipped "        }]     }]}

See the Ext.data.reader.Reader intro docs for a full explanation.

Filtering and sorting filtering and sorting

Stores can be sorted and filtered-in both cases either remotely or locally. The sorters and filters is held inside mixedcollection instances to make them easy to manage. Usually it is sufficient to either just specify sorters and filters in the Store configuration or call sort or filter:

The store can be sorted and filtered--and both remote and local modes are supported. Mixedcollection internal management of the sorters and Filters . you can either specify sorters and filters by Stroe configuration Items , or call the sort or filter directly.

var store = ext.create (' Ext.data.Store ', {     ' User ',     sorters: [{         ' age ',          ' DESC '     }, {         ' firstName ',         ' ASC '     }],     filters: [{          ' FirstName ',         /ed/     }]});

The new Store would keep the configured sorters and filters in the Mixedcollection instances mentioned above. By default, sorting and filtering is both performed locally by the Store-see Remotesort and Remotefilter to allow the S Erver to perform these operations instead.

This new store will save the configuration of sorters and filters in the mixedcollection instance . By default, sorting and filtering are done locally--see Remotesort and Remotefilter to allow the server to perform operations.

Filtering and sorting after the Store have been instantiated are also easy. Calling filter adds another filter to the Store and automatically filters the dataset (calling filter with no arguments si Mply re-applies all existing filters). Note this by default Sortonfilter was set to true, which means that your sorters be automatically reapplied if using local sorting.

After the store is instantiated, it is also easy to modify filtering and sorting. Call filter to add additional filtering and automatically filter the dataset (directly calling filter without parameters will reapply existing filters). Note that Sortonfilter defaults to True, which means that your sorter will be automatically re-applied.

Store.filter (' Eyecolor ', ' Brown ');

Change the sorting at any time by calling sort:

At any time, change the sort by calling the Sort method:

Store.sort (' height ', ' ASC ');

Note that all existing sorters would be removed in favor of the new sorter data (if sort was called with no arguments, the E Xisting sorters is just reapplied instead of being removed). To keep existing sorters and add new ones, just add them to the mixedcollection:

Note that all existing sorting will be superseded (if sort is called in parameterless form, the existing sorter will be re-applied instead of removed). If you want to keep the existing sort and add new ones, add them to mixedcollection:

Store.sorters.add (new  Ext.util.Sorter ({    ' shoesize ',    ' ASC '}); Store.sort ( );

Registering with Storemanager registered in Storemanager

Any Store, that's instantiated with a storeId would automatically be registered with the Storemanager. This makes it easy-to-reuse the same store in multiple views:

Any store that is instantiated with a StoreID is automatically registered to Storemanager. This makes it easy to reuse the same store between multiple views:

// This store can be used several times Ext.create (' Ext.data.Store ', {    ' User ',    ' Usersstore '}); New ext.list ({    ' usersstore ',    //Otherconfig goeshere}); New Ext.view.View ({    ' usersstore ',    //Otherconfig goeshere});

Further Reading extended Reading

Stores is backed up by a ecosystem of classes that enables their operation. To gain a full understanding of these pieces and how they fit together, see:

The store is built on a class system. To fully understand them and how they work together, see:

• Proxy-overview of what Proxies is and how they is used
• Model-the Core class in the data package
• Reader-used by any subclass of Serverproxy to read a response

ExtJS Note Store