Ext.js - Dados

O pacote de dados é usado para carregar e salvar todos os dados no aplicativo.

O pacote de dados tem um grande número de classes, mas as classes mais importantes são -

  • Model
  • Store
  • Proxy

Modelo

A classe base para o modelo é Ext.data.Model. Ele representa uma entidade em um aplicativo. Ele vincula os dados da loja à visualização. Ele possui mapeamento de objetos de dados de back-end para o view dataIndex. Os dados são obtidos com a ajuda de store.

Criando um modelo

Para criar um modelo, precisamos estender a classe Ext.data.Model e definir os campos, seus nomes e mapeamento.

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

Aqui, o nome deve ser igual ao dataIndex, que declaramos na visualização e o mapeamento deve corresponder aos dados, estáticos ou dinâmicos do banco de dados, que devem ser buscados usando store.

Loja

A classe base para loja é Ext.data.Store. Ele contém os dados armazenados em cache localmente, que devem ser renderizados na visualização com a ajuda de objetos de modelo. O armazenamento busca os dados usando proxies, que tem o caminho definido para os serviços buscarem os dados de back-end.

Os dados da loja podem ser obtidos de duas maneiras - estática ou dinâmica.

Armazenamento estático

Para armazenamento estático, teremos todos os dados presentes no armazenamento conforme mostrado no código a seguir.

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" }
   ];
});

Loja Dinâmica

Os dados dinâmicos podem ser buscados usando proxy. Podemos ter proxy que pode buscar dados de Ajax, Rest e Json.

Proxy

A classe base para proxy é Ext.data.proxy.Proxy. Proxy é usado por Modelos e Lojas para lidar com o carregamento e salvamento de dados do Modelo.

Existem dois tipos de proxies

  • Proxy de Cliente
  • Proxy de servidor

Proxy de Cliente

Os proxies de cliente incluem memória e armazenamento local usando armazenamento local HTML5.

Proxy de servidor

Os proxies de servidor manipulam dados do servidor remoto usando Ajax, dados Json e serviço Rest.

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