Herencia Más videos
Descripción del tema
Herencia en ExtJS
En el ejemplo que vamos a hacer hoy vamos a usar la clase que creamos en la sesión anterior, asi que abrimos el archivo Usuario.js y le agregamos dos propiedades más: nombre y apellido.Ext.define('MyApp.data.Usuario',{
username : '',
email : '',
password : '',
nombre : '',
apellido : '',
constructor : function(options){
Ext.apply(this, options || {});
},
login : function(options){
console.log(this.username,this.password);
},
logout : function(){
}
});Para poder heredar de la clase Usuario, vamos a crear otra clase que se va a llamar Cliente, le definimos el espacio de nombres el cual sería MyApp.data.Cliente y le agregamos una propiedad llamada extend, la cual nos va a servir para indicarle a la clase Cliente que deseamos extender de otra clase que en este caso es MyApp.data.Usuario. En este momento la clase Cliente tiene las mismas propiedades y los mismos métodos que la clase Usuario, pero le podemos agregar más propiedades y métodos para hacer la clase más especializada.Ext.define('MyApp.data.Cliente',{
extend : 'MyApp.data.Usuario',
rfc : '',
calle : '',
colonia : '',
ciudad : '',
estado : '',
pais : '',
agregarPedido : function(item){
console.log(item);
}
});Las nuevas propiedades y el método agregarPedido van a ser exclusivos de la clase Cliente y se podrán usar al momento de hacer la instancia.Creando la instancia de la nueva clase
Ahora bien, necesitamos crear un nuevo archivo HTML 02-herencia.html donde vamos a importar ambas clases: Usuario y Cliente y creamos una instancia de la clase Cliente de la siguiente forma:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Herencia</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 este ejemplo en el navegador, vamos a ver en la consola lo que imprimió el método login() que fue heredado de la clase Usuario, y también podemos ver el item que especificamos en el método agregarPedido.
Como puedes ver hacer herencia en ExtJS es muy simple en esta versión, basta con definir la clase de la cual queremos extender y listo.
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.
4Comentarios
Estoy usando firefox pero no consigo ver nada más que errores en la consola, para hacer la comprovación, sín embargo en la primera lección sí que funcionaba todo el código, ¿alguna recomendación?
Que errores son los que te aparecen? Asegúrate de importar correctamente la librería de Ext, así como los archivos que contienen las clases Usuario y Cliente. Un Saludo
A ver, errores no hay en el código, la librería queda enlazada perfectamente puesto que en la primera clase funcionaba y la ventana aparecía de la misma forma que en el video, sin embargo con Firefox ya sea con la consola web o la de errores no visualizo lo mismo. Un saludo
Haré la prueba con Chrome también, pero me gustaría saber visualizarlo correctamente con Firefox.