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