El Modelo Más videos
Descripción del tema
Mediante el uso del modelo podemos definir la información que necesitamos manejar dentro de nuestra aplicación, es una excelente manera de mantener en un solo lugar nuestros objetos.
Definiendo el modelo
Para hacer el ejemplo de esta sesión es necesario que creemos una nueva carpeta llamada 05-data, adentro de esa carpeta vamos a crear una carpeta llamada js y adentro de js otra carpeta llamada model. En la carpeta model vamos a crear la clase Factura.js la cual va a heredar de Ext.data.Model, esta clase nos permite definir todo lo necesario para el modelo. Con la propiedad fields vamos a definir los campos que va a tener el modelo.
Ext.define('MyApp.model.Factura',{
extend : 'Ext.data.Model',
idProperty : 'folio', //paso 1
fields : [
{name:'folio',type:'int'}, //paso 2
{name:'cliente'}, //paso 3
{name:'direccion'},
{name:'fecha',type:'date',dateFormat:'Y-m-d h:i:s'}, //paso 4
{name:'cobrada',type:'boolean',defaultValue:false} //paso 5
]
});- En el paso 1 estamos usando la propiedad idProperty que está definiendo cual de los fields va a ser el identificador.
- En el paso 2 agregamos una field especificándole el nombre con la propiedad name y el tipo de field que va a ser con la propiedad type, en este caso será entero.
- En el paso 3 agregamos un field para el cliente y uno para la dirección.
- En el paso 4 agregamos un field para la fecha con la propiedad name, especificamos que el tipo de field será y que formato va a tener la fecha con la propiedad dateFormat.
- En el paso 5 agregamos un field de tipo booleano con el valor por defecto de falso, el valor por defecto lo especificamos con la propiedad defaultValue.
Instanciando el modelo
Ahora necesitamos crear un archivo HTML 01-model.html donde vamos a instanciar el modelo usando el método Ext.create y vamos a imprimir algunos fields en la consola.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Custom Ajax</title>
<link rel="stylesheet" href="../ext-4.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-4.2.1/ext-all-dev.js"></script>
<script type="text/javascript" src="js/model/Factura.js"></script> //paso 1
<script type="text/javascript">
var f = Ext.create('MyApp.model.Factura',{ //paso 2
fecha : '2012-05-10 06:25:10',
cliente : 'Juan Perez',
direccion : 'Calle de Piedra #2001, Del. Azteca, Mexico DF'
});
console.log(f.get('direccion')); //paso 3
console.log(f.get('cobrada'));
</script>
</head>
<body>
</body>
</html>- En el paso 1 importamos la clase Factura.js al archivo HTML, podemos usar el Loader para cargar la clase pero para este ejemplo que es pequeño lo vamos a dejar así.
- En el paso 2 creamos una instancia de la clase Factura y le asignamos valores a los campos de fecha, siguiendo el formato que le especificamos en el modelo, cliente y dirección. Si aquí le asignamos algún campo que no exista en el modelo, simplemente va a ser ignorado.
- En el paso 3 imprimimos el campo de dirección en la consola utilizando el método get. También imprimimos el campo cobrada, este campo ya tenía un valor definido en el modelo, por lo tanto ese valor será el que se imprimirá en la consola.
f.set('cobrada',true);
console.log(f.get('cobrada'));Al ejecutar el ejemplo vamos a ver que el valor de cobrada ha cambiado a true. Para poder ver todos los valores de los campos del modelo podemos usar el objeto data.
console.log(f.data);Es posible modificar el valor de algún campo usando el objeto data:
f.data.cliente = 'Pedro';Aunque esta forma no se recomienda ya que cuando se usa el método set hay varias cosas que suceden internamente, como por ejemplo al modificar algún campo, el modelo se marca como "sucio" y los valores que tenía son guardados en variables temporales, esto es útil si en algún momento deseamos deshacer los cambios.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Fundamentos de Ext 4, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Fundamentos de Ext 4, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
Se el primero en comentar!