Sobreescritura de métodos Más videos
Comentarios: 0
Likes: 0 Persona
Duración: 8.31 minutos
Dificultad: Principiante
Descripción del tema
Cuando realizamos herencia es muy probable que necesitemos especializar ciertos métodos que ya existen en la super clase, en este tema se muestra como podemos hacerlo sin perder la funcionalidad que ya teníamos definida.
Vamos a hacer otro ejemplo usando el método callParent, vamos a sobreescribir el método login en la clase Cliente mandando un mensaje en la consola. Al método callParent le vamos a pasar como parámetro el arreglo arguments, que es un arreglo que contiene los argumentos que se enviaron a la función.
Sobreescribiendo métodos
Para el ejemplo de esta sesión vamos a utilizar las clases Cliente y Usuario que creamos en sesiones anteriores. A la clase Cliente le vamos a agregar el método constructor el cual va a imprimir solamente un mensaje en la consola, al hacer esto el constructor de la superclase va a ser sobreescrito por lo que acabamos de hacer.Ext.define('MyApp.data.Cliente',{
extend : 'MyApp.data.Usuario',
rfc : '',
calle : '',
colonia : '',
ciudad : '',
estado : '',
pais : '',
constructor : function(options){
console.log('Constructor en la subclase!');
},
agregarPedido : function(item){
console.log(item);
}
});Para comprobar que el constructor de la superclase fue sobreescrito vamos a crear un HTML llamado 03-sobreescritura.html, importamos las clases de Usuario y Cliente, creamos una instancia de la subclase Cliente y mandamos a llamar los métodos de login y agregarPedido, asi como lo hicimos en el ejemplo de la sesión anterior.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sobre-escritura</title>
<link rel="stylesheet" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/ext-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.login();
cliente.agregarPedido({
nombre : 'Mesa',
precio : 123.65
});
});
</script>
</head>
<body>
</body>
</html>Si probamos nuestro ejemplo en el navegador nos vamos a dar cuenta que no se imprimió nada en la llamada del método login, esto quiere decir que se no se está invocando el constructor de la superclase. Para resolver este problema Ext tiene un método que se llama callParent(), el cual invoca o ejecuta el método de la superclase de donde lo estamos llamando, es decir que en este caso se va a invocar el método constructor de la superclase. Ext.define('MyApp.data.Cliente',{
extend : 'MyApp.data.Usuario',
rfc : '',
calle : '',
colonia : '',
ciudad : '',
estado : '',
pais : '',
constructor : function(options){
console.log('Constructor en la subclase!');
this.callParent([options]);
},
agregarPedido : function(item){
console.log(item);
}
});Al probar este ejemplo otra vez en el navegador, vamos a ver que ya se imprime en la consola el username y password que el método login imprime. Vamos a hacer otro ejemplo usando el método callParent, vamos a sobreescribir el método login en la clase Cliente mandando un mensaje en la consola. Al método callParent le vamos a pasar como parámetro el arreglo arguments, que es un arreglo que contiene los argumentos que se enviaron a la función.
Ext.define('MyApp.data.Cliente',{
extend : 'MyApp.data.Usuario',
rfc : '',
calle : '',
colonia : '',
ciudad : '',
estado : '',
pais : '',
constructor : function(options){
console.log('Constructor en la subclase!');
this.callParent([options]);
},
login : function(item){
var me = this;
console.log('Login: Dentro de la subclase');
this.callParent(arguments);
},
agregarPedido : function(item){
console.log(item);
}
});Es importante recordar la importancia de usar el método callParent, en estos ejemplos solo estuvimos imprimiendo mensajes en la consola pero en una aplicación real podríamos perder alguna funcionalidad muy importante.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!