ExtJS Store, Model

Ext.data.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.

Creating a Store is easy - we just tell it the Model and the Proxy to use to load and save its data:
// Set up a model to use in our Store

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});


Method:
1) getAt( Number index ) : Ext.data.Model
Get the Record at the specified index.
The index is effected by filtering.
2) load( [Object/Function options] )
Loads data into the Store via the configured proxy. This uses the Proxy to make an asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved instances into the Store and calling an optional callback if required. Example usage:
store.load({
scope: this,
callback: function(records, operation, success) {
// the operation object
// contains all of the details of the load operation
console.log(records);
}
});
If the callback scope does not need to be set, a function can simply be passed:
store.load(function(records, operation, success) {
console.log('loaded records');
});
Parameters
· options : Object/Function (optional)
config object, passed into the Ext.data.Operation object before loading. Additionally addRecords: true can be specified to add these records to the existing records, default is to remove the Store's existing records first.
Overrides: Ext.data.AbstractStore.load

Briefing on Store and Model:
Model and Store
A Store can be thought of as a collection of records, or Model instances. The benefit of this setup is clear separation of concerns. The Grid Panel is only concerned with displaying the data, while the Store takes care of fetching and saving the data using its Proxy.
First we need to define a Model. A Model is just a collection of fields that represents a type of data. Let's define a model that represents a "User":
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
Next let's create a Store that contains several User instances.

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
For sake of ease we configured the Store to load its data inline. In a real world application you'll usually configure the Store to use a Proxy to load data from the server.
Events:
1) load( Ext.data.Store this, Ext.data.Model[] records, Boolean successful, Object eOpts )
Fires whenever the store reads data from a remote data source.(there is no render event in store)