Ext.js - Datos
El paquete de datos se utiliza para cargar y guardar todos los datos en la aplicación.
El paquete de datos tiene numerosas clases, pero las clases más importantes son:
- Model
- Store
- Proxy
Modelo
La clase base para el modelo es Ext.data.Model. Representa una entidad en una aplicación. Vincula los datos de la tienda para verlos. Tiene mapeo de objetos de datos de backend a la vista dataIndex. Los datos se obtienen con la ayuda de store.
Creando un modelo
Para crear un modelo, necesitamos extender la clase Ext.data.Model y necesitamos definir los campos, su nombre y mapeo.
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
Aquí, el nombre debe ser el mismo que el dataIndex, que declaramos en la vista y el mapeo debe coincidir con los datos, ya sean estáticos o dinámicos de la base de datos, que se obtendrán usando store.
Tienda
La clase base para la tienda es Ext.data.Store. Contiene los datos almacenados en caché localmente, que se mostrarán a la vista con la ayuda de objetos modelo. Store obtiene los datos mediante proxies, que tiene la ruta definida para que los servicios obtengan los datos del backend.
Los datos de la tienda se pueden recuperar de dos formas: estática o dinámica.
Tienda estática
Para la tienda estática, tendremos todos los datos presentes en la tienda como se muestra en el siguiente código.
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" }
];
});
Tienda dinámica
Los datos dinámicos se pueden recuperar mediante proxy. Podemos tener un proxy que puede obtener datos de Ajax, Rest y Json.
Apoderado
La clase base para el proxy es Ext.data.proxy.Proxy. Los modelos y las tiendas utilizan el proxy para gestionar la carga y el guardado de los datos del modelo.
Hay dos tipos de proxies
- Proxy del cliente
- Proxy del servidor
Proxy del cliente
Los proxies de cliente incluyen memoria y almacenamiento local usando almacenamiento local HTML5.
Proxy del servidor
Los proxies de servidor manejan datos del servidor remoto usando Ajax, Json data y el servicio 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'
},
}
});