Manejo de Configuraciones Más videos
Comentarios: 3
Likes: 0 Persona
Duración: 11.01 minutos
Dificultad: Principiante
Descripción del tema
En esta sesión vamos a estar hablando de las configuraciones y como podemos utilizarlas, ya que es una nueva característica que tiene Ext JS 4.
Probemos modificando el valor del parámetro de otra forma:
Propiedad config
Para empezar vamos a abrir la clase Usuario que hemos estado usando en las sesiones anteriores. Vamos a utilizar una propiedad llamada config, esta propiedad va a ser un objeto que va a contener todas aquellas configuraciones que se necesiten en una clase.Ext.define('MyApp.data.Usuario',{
config : { //Paso 1
username : '',
email : '',
password : '',
nombre : '',
apellido : ''
},
constructor : function(options){
this.initConfig(options); //Paso 2
},
login : function(options){
console.log(this.username,this.password);
},
logout : function(){
}
});- En el paso 1 agregamos las propiedades username, email, password, nombre y apellido al objecto config. Al momento en que se crea la clase, se va a crear un método get y un método set por cada una de estas configuraciones.
- En el paso 2 cambiamos el código, antes estábamos usando el método apply que básicamente copiaba los options que venian en el constructor y sobreescribia las propiedades que tenemos definidas. Ahora estamos invocando el método initConfig que recibe como parámetro el objeto de configuración que viene cuando creamos la instancia para que de ahí tome todas las propiedades que va a asignar inmediatamente cuando se está construyendo la clase.
Ext.define('MyApp.data.Cliente',{
extend : 'MyApp.data.Usuario',
mixins : {
observable : 'Ext.util.Observable'
},
config : {
rfc : '',
calle : '',
colonia : '',
ciudad : '',
estado : '',
pais : ''
},
constructor : function(options){
console.log('Constructor en la subclase!');
this.addEvents({
'success' : true,
'failure' : true
});
this.callParent([options]);
this.mixins.observable.constructor.call(this);
},
login : function(item){
var me = this;
console.log('Login: Dentro de la subclase');
this.callParent(arguments);
setTimeout(function(){
me.fireEvent('success',new Date(),3,2,1);
},2000);
},
agregarPedido : function(item){
console.log(item);
}
});Probando el uso de las configuraciones
Vamos a crear un archivo HTML 05-config.html para probar este ejemplo, podemos copiar el HTML que usamos en la sesión anterior. El único cambio que vamos le vamos a hacer es que al final vamos a imprimir en la consola el nombre de usuario de la instancia cliente y el email, para hacer esto usamos el método getUsername y getEmail.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Config</title>
<link rel="stylesheet" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/ext-all-dev.js"></script>
<script type="text/javascript" src="Usuario.js"></script>
<script type="text/javascript" src="Cliente.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var cliente = Ext.create('MyApp.data.Cliente',{
username : 'john',
password : '123',
email : 'john@gmail.com',
calle : 'Maria Josefa 2053',
colonia : 'Ignacio Mejia'
});
cliente.on('success',function(hora,x,y,z){
Ext.Msg.alert('Exito','El usuario se registro con éxito!');
});
cliente.on('success',function(hora,x,y,z){
console.log('Otro listener!');
});
cliente.login();
cliente.agregarPedido({
nombre : 'Mesa',
precio : 123.65
});
console.log(cliente.getUsername());
console.log(cliente.getEmail());
});
</script>
</head>
<body>
</body>
</html>Al ejecutar este ejemplo en el navegador deberíamos ver el username, en este caso John, y el email, que es john@gmail.com, en la consola. También podemos usar el método set, para asignarle el valor que queramos a la propiedad username: cliente.setUsername('crysfel');Si probamos de nuevo el ejemplo en el navegador, vamos a ver que en lugar de imprimirse John en la consola, se esta imprimiendo el nuevo valor que le fue asignado. De esta forma podemos ver que los métodos get y set fueron creados dinámicamente por ExtJS, solo se necesitó usar la propiedad config.Interceptando la asignación
Otra característica más que podemos utilizar junto con las configuraciones es el método apply, que va seguido del nombre de la configuración, como por ejemplo applyEmail, applyRfc, etc. Este método funciona como un interceptor, es decir que al momento de usar el método set de alguna configuración, como por ejemplo setEmail, se va a invocar primero el método applyEmail antes de asignarle el valor a la configuración o propiedad email. El método apply recibe un parámetro que es el valor que se le asignó a la propiedad con el método set. Para probar esto vamos a agregar el siguiente método a la clase Cliente:applyEmail : function(value){
return value;
}
El valor que viene en el parámetro puede ser modificado dentro del método y el valor resultante será el que se le asigne a la propiedad. applyEmail : function(value){
return 'crysfel@bleext.com';
}
Si probamos este ejemplo ahora, en la consola el email que se imprimirá será crysfel@bleext.com en lugar de john@gmail.com. Probemos modificando el valor del parámetro de otra forma:
applyEmail : function(value){
var domain = value.split('@')[1]; //Paso 1
if(domain === 'gmail.com'){ //Paso 2
return value.split('@')[0]+'@bleext.com';
}
return value;
}- En el paso 1 tomamos el dominio del email usando el método split.
- En el paso 2 validamos si el dominio es gmail.com vamos a cambiarlo por bleext.com. El valor resultante, que en este ejemplo sería john@bleext.com, es el valor que se le asignará a la propiedad email.
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.
3Comentarios
¿Dentro de un objeto que se hereda de Ext.data.Model los campos que se definen en filelds se pueden poner dentro de config{}?
En Sencha Touch si, en Ext JS no, es algo raro que supongo que Sencha va a componer en Ext5.
Amigo, Aparte de los videos y del material extra de cada lección, que hay debajo de cada video... tendrás algún código de un aplicativo básico donde apliques todos estos conceptos de clases, herencias y otros...