Ext.js data

Packets are used to load and save all the data in the application.

Packets have many classes, but the most important are:

1. Modality
2. Store
3. Agent

Model

Create a model

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

The name here should be the same as the dataIndex we declared in the view, and the mapping should match the static or dynamic data obtained from the database using the store.

Store

Store's base class is Ext.data.Store. /b10> It contains locally cached data that will be rendered on the view with the help of model objects. /b11> The store uses a proxy to get data, and the agent has a path defined for the service to get back-end data.

Stored data can be obtained either statically or dynamically.

Static storage

For static storage, we will store all the data in the store as follows:

   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 storage

You can use agents to get dynamic data. /b10> We can let agents get data from Ajax, Rest and Johnson.

Agent

The agent's base class is Ext.data.proxy.Proxy. /b10> Agents are used by models and stores to process the loading and saving of model data.

There are two types of agents:

1. The client agent
2. The server agent

The client agent

Client agents include memory stored locally using HTML5 and local storage.

The server agent

Server agents use Ajax, Json data, and Rest services to process data from remote servers.

Define the agents 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'
      },
   }
});