Ext.js - Data

Data package is used for loading and saving all the data in the application.
The data package has numerous number of classes but the most important classes are:

1. Modal
2. Store
3. Proxy

Model:

The base class for modal is Ext.data.Model.It represents an entity in an application. It binds the store data to view. It has mapping of backend data objects to the view dataIndex. The data is fetched with the help of store.

Creating a Model:

For creating a model we need to extend Ext.data.Model class and we need to define fields their name and mapping.

   Ext.define('StudentDataModel', {
      extend: 'Ext.data.Model',
      fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
      ]
   });

Here the name should be same as the dataIndex which we declare in the view and the mapping should match the data either static or dynamic from database which is to be fetched using store.

Store:

The base class for store is Ext.data.Store. It contains the data locally cached which is to be rendered on view with the help of model objects. Store fetches the data using proxies which has the path defined for services to fetch the backend data.
Store data can be fetched from two ways static or dynamic.

Static store:

For static store we will have all the data present in the store as below:

   Ext.create('Ext.data.Store', {
      model: 'StudentDataModel',
      data: [
         { name : "Asha", age : "16", marks : "90" },
         { name : "Vinit", age : "18", marks : "95" },
         { name : "Anand", age : "20", marks : "68" },
         { name : "Niharika", age : "21", marks : "86" },
         { name : "Manali", age : "22", marks : "57" }
      ];
   });

Dynamic store:

The dynamic data can be fetched using proxy. we can have proxy can fetched data from Ajax, Rest and Json.

Proxy:

The base class for proxy is Ext.data.proxy.Proxy. Proxy is used by Models and Stores to handle the loading and saving of Model data.
There are two types of proxies:

1. Client Proxy
2. Server Proxy

Client Proxy

Client proxies include Memory and Local Storage using HTML5 local storage.

Server Proxy

Server proxies handles data from remote server using Ajax, Json data and Rest service.

Defining proxies in the server:

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST'  // Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});