Ext.js - Data

Data package is used for loading and saving all the data in the apppcation.

Data package has numerous number of classes but the most important classes are −

Model

Store

Proxy

Model

The base class for model is Ext.data.Model. It represents an entity in an apppcation. 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 the 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 the same as the dataIndex, which we declare in the view and the mapping should match the data, either static or dynamic from the 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 in two ways - static or dynamic.

Static store

For static store, we will have all the data present in the store as shown in the following code.

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 : "Manap", age : "22", marks : "57" }
   ];
});

Dynamic Store

Dynamic data can be fetched using proxy. We can have proxy which can fetch 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

Cpent Proxy

Server Proxy

Cpent Proxy

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

Server Proxy

Server proxies handle data from the 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 
      },
   }
});