A Glimpse of Ext JS 5 – Model & Store

In the present web development niche, the urge for a simpler, light weight and effortless framework for building interactive web applications seems to be evolving with time. THis is where Ext JS can play an integral role. EXT JS is a JavaScript application framework for building interactive web applications. Most advanced web technologies like Ajax, DHTML and DOM scripting can be embedded with EXT JS. Version 5.0 of the Ext JS framework was released on June 2, 2014. One of the most exciting advantage is support for devices with touch­screen input,including tablets and touch­screen laptops. This can be achieved by minimal modification and hence you have fewer concerns related to compatibility and this literally caters you more time to develop and implement great functionality . EXT JS consists of support for adding widgets inside a grid cell for data visualization and big data analytics. Ext JS 5 also includes an upgraded touch-optimized charting package along with additional financial charting capabilities.

Model:
A Model represents objects that your application manages such as products ,customers etc. Models are mainly used by stores. Each model contains a set of fields as well as functions that enable the application to perform different operations on its data.

  Ext.define('Customer', { extend : 'Ext.data.Model', requires : [ 'Order', ], fields : [ {name : 'id', type : 'int'}, {name : 'name', type : 'string'} {name : 'address', type : 'string'} ], hasMany: 'Order' });

Each Model consists of four components Fields,Proxy,Associations,validations.
Fields:
Every model consists of fields.Fields can have name and types such as int ,string etc.
Proxy:
In models, proxy is used to load and save data.There are two type of proxies such as client and server. client proxies save data locally which includes LocalStorage,SessionStorage and MemoryProxy. Server proxies save their data by sending requests to remote servers ,which includes ajax,jsonP,Rest,Direct.

Associations:
Models have association with other models.
1. Foreign key associations or one to Many :
The simplest way to define an association from one Model to another is to add a reference config to the appropriate field.

  Ext.define('Post', { extend: 'Ext.data.Model', fields: [ { name: 'user_id', reference: 'User' } ] }); Ext.define('Comment', { extend: 'Ext.data.Model', fields: [ { name: 'user_id', reference: 'User' }, { name: 'post_id', reference: 'Post' } ] }); Ext.define('User', { extend: 'Ext.data.Model', fields: [ 'name' ] });

2. One-to-Many Without Foreign-Keys:
To define an association without a foreign-key field, you will need to use either the hasMany or belongsTo.

  Ext.define('Post', { extend: 'Ext.data.Model', belongsTo: 'User' }); Ext.define('Comment', { extend: 'Ext.data.Model', belongsTo: [ 'Post', 'User' ] }); Ext.define('User', { extend: 'Ext.data.Model', fields: ['name'] });

3. Foreign-Key Associations – One-to-One:
This is defined as a unique reference.

  Ext.define('Address', { extend: 'Ext.data.Model', fields: [ 'address', 'city', 'state' ] }); Ext.define('User', { extend: 'Ext.data.Model', fields: [{ name: 'addressId', reference: 'Address', unique: true }] });

4. Many-to-Many Associations:
In below example cases Users can belong to many Groups and Groups can contain many Users.

  Ext.define('User', { extend: 'Ext.data.Model', fields: [ 'name' ], manyToMany: 'Group' }); Ext.define('Group', { extend: 'Ext.data.Model', fields: [ 'name' ], manyToMany: 'User' });

Validations:

Models support validations on fields .

  Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' }, { name: 'gender', type: 'string' }, { name: 'username', type: 'string' }, { name: 'alive', type: 'boolean', defaultValue: true } ], validators: { age: 'presence', name: { type: 'length', min: 2 }, gender: { type: 'inclusion', list: ['Male', 'Female'] }, username: [ { type: 'exclusion', list: ['Admin', 'Operator'] }, { type: 'format', matcher: /([a-z]+)[0-9]{2,3}/i } ] } });

Stores:

In ExtJS, you have Ext.data.Stores to hold all your data.Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.
Store needs model and the proxy to use for loading and saving its data.

  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', rootProperty: 'users' } }, autoLoad: true });

In the above example store uses ajax proxy to load data form server .The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format
We can also give static data to the store.

  Ext.create('Ext.data.Store', { model: 'User', data : [ {firstName: 'Jack', lastName: 'Dawson'}, {firstName: 'Tommy', lastName: 'Maintz'} ] });

Dynamic Loading :

Stores can be dynamically updated using load method.

  store.load({ params: { group: 3, type: 'user' }, callback: function(records, operation, success) { // do something after the load finishes }, scope: this });

Filtering and Sorting :
Stores can be sorted and filtered.We just need to specify sorters and filters in the Store configuration or call sort or filter.

  var store = Ext.create('Ext.data.Store', { model: 'User', sorters: [{ property: 'age', direction: 'DESC' }, { property: 'firstName', direction: 'ASC' }], filters: [{ property: 'firstName', value: /Ed/ }] });

Registering with StoreManager:

Any Store that is instantiated with a storeId will automatically be registered with the StoreManager. This makes it easy to reuse the same store in multiple views.

Model and Store are the most important feature of Ext JS which will reduce your effort for data management, grid management, database connections etc and make the framework, developer friendly and reliable. These features are convincing enough for any developer to choose EXT JS. Drop a comment below and let me know how this post helped you.

Courtesy: Sencha.com

Know More About This Topic from our Techies