Creación de clases Más videos
Comentarios: 10
Likes: 1 Persona
Duración: 13.4 minutos
Dificultad: Principiante
Descripción del tema
En este tema vamos a ver como crear clases en Ext JS 4, una manera completamente nueva con respecto a la versión anterior que nos permite utilizar un Loader para carga dinámica, herencia múltiple y muchas cosas más que veremos a lo largo del curso.
Para definir una clase se usa el método Ext.define, el cual recibe dos parámetros: en el primer parámetro se especifica con un String el nombre de la clase y en el segundo es un objeto con todos los métodos y propiedades que se necesiten definir para la nueva clase.
La clase se llamará Usuario y estará dentro de un paquete llamado MyApp.data. Es importante definir un buen espacio de nombres para cada clase, ya que esto sirve al momento en que la aplicación comience a crecer pues podemos crear más paquetes con clases que tengan funcionalidades específicas. Es conveniente que el nombre del archivo sea el nombre de la clase, ya que esto nos ayudará a identificar en que archivo tenemos que clase, básicamente lo ideal sería tener un archivo por clase pues al momento en que la aplicación se haga más grande va a ser más fácil de mantener.
A la clase Usuario le podemos agregar las propiedades que necesitemos, para este ejemplo le vamos agregar username, email y password de la siguiente manera:
Si queremos usar un constructor es necesario usar o definir el método constructor, este método va a ser ejecutado de manera automática cuando se esté creando la instancia de la clase Usuario. Dentro del constructor es posible inicializar algunos parámetros, en este ejemplo vamos a agregarle el parámetro options al constructor y vamos a usar el método Ext.apply el cual va a aplicar el objeto options a la instancia que estamos creando, es decir que va a sobreescribir el valor que tienen por defecto las propiedades de la clase con lo que tiene el objeto options. Es necesario validar si el objecto options viene vacío o nulo con un objeto vacío.
Es posible crear muchas instancias de la misma clase Usuario, vamos a agregar una instancia de la clase de la misma forma, usando el método Ext.create. También modifiquemos las propiedades con valores diferentes y probemos el ejemplo en el navegador.
Definición de una clase
Antes de empezar a definir una clase es necesario abrir el proyecto que fue creado la sesión anterior y crear un nuevo folder llamado 02-sistema de clases, dentro de este folder vamos a crear un nuevo archivo llamado Usuario.jsPara definir una clase se usa el método Ext.define, el cual recibe dos parámetros: en el primer parámetro se especifica con un String el nombre de la clase y en el segundo es un objeto con todos los métodos y propiedades que se necesiten definir para la nueva clase.
La clase se llamará Usuario y estará dentro de un paquete llamado MyApp.data. Es importante definir un buen espacio de nombres para cada clase, ya que esto sirve al momento en que la aplicación comience a crecer pues podemos crear más paquetes con clases que tengan funcionalidades específicas. Es conveniente que el nombre del archivo sea el nombre de la clase, ya que esto nos ayudará a identificar en que archivo tenemos que clase, básicamente lo ideal sería tener un archivo por clase pues al momento en que la aplicación se haga más grande va a ser más fácil de mantener.
A la clase Usuario le podemos agregar las propiedades que necesitemos, para este ejemplo le vamos agregar username, email y password de la siguiente manera:
Ext.define('MyApp.data.Usuario',{
username : '',
email : '',
password : ''
});Al momento en que se cree la instancia de la clase de Usuario vamos a poder definir el valor de sus propiedades, por defecto en este momento se están asignando como vacíos. También le podemos definir métodos con o sin parámetros, en este ejemplo vamos a agregarle a la clase un método llamado login que recibe el parámetro options y tendrá como funcionalidad imprimir en la consola del navegador el valor de las propiedades username y password, le podemos agregar también otro método llamado logout que por ahora no va a hacer nada.Ext.define('MyApp.data.Usuario',{
username : '',
email : '',
password : '',
login : function(options){
console.log(this.username,this.password);
},
logout : function(){
}
});No es obligatorio que se definan las propiedades en la parte superior y luego los métodos, de hecho podemos ponerlo en cualquier orden, pero hacerlo de esta manera nos facilitará la lectura de nuestro código.Si queremos usar un constructor es necesario usar o definir el método constructor, este método va a ser ejecutado de manera automática cuando se esté creando la instancia de la clase Usuario. Dentro del constructor es posible inicializar algunos parámetros, en este ejemplo vamos a agregarle el parámetro options al constructor y vamos a usar el método Ext.apply el cual va a aplicar el objeto options a la instancia que estamos creando, es decir que va a sobreescribir el valor que tienen por defecto las propiedades de la clase con lo que tiene el objeto options. Es necesario validar si el objecto options viene vacío o nulo con un objeto vacío.
Ext.define('MyApp.data.Usuario',{
username : '',
email : '',
password : '',
constructor : function(options){
Ext.apply(this,options || {});
},
login : function(options){
console.log(this.username,this.password);
},
logout : function(){
}
});Si no definimos un constructor, nuestra clase va a contar con uno vacío el cual se genera automáticamente.Instancia de una clase
Para instanciar la clase Usuario, es necesario crear un archivo HTML llamado 01-clase.html, así como vimos en la sesión anterior importamos la hoja de estilos ext-all.css y el ext-dev.js y agregamos el método Ext.onReady para poder crear la instancia de la clase adentro. No olvidemos importar la clase Usuario.js antes de crear la instancia.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clases</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">
Ext.onReady(function(){
});
</script>
</head>
<body>
</body>
</html>Para crear la instancia de la clase es necesario usar el método Ext.create, el cual recibe dos parámetros: el primer parámetro es el nombre de la clase de la cual se quiere crear la instancia y el segundo es un objeto con las propiedades que se desean sobreescribir. El método Ext.create regresa la instancia de la clase, en este ejemplo vamos a tomar el valor en una variable llamada usuario., ahora ya podemos usar los métodos que tiene usuario, si bien recuerdas tenia un método llamado login.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clases</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">
Ext.onReady(function(){
var usuario = Ext.create('MyApp.data.Usuario',{
username : 'john',
password : '123',
email : 'john@gmail.com'
});
usuario.login();
});
</script>
</head>
<body>
</body>
</html>Ahora podemos probar nuestro ejemplo en el navegador, al momento de cargarse la página debemos poder ver los datos del usuario en la consola.Es posible crear muchas instancias de la misma clase Usuario, vamos a agregar una instancia de la clase de la misma forma, usando el método Ext.create. También modifiquemos las propiedades con valores diferentes y probemos el ejemplo en el navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clases</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">
Ext.onReady(function(){
var usuario = Ext.create('MyApp.data.Usuario',{
username : 'john',
password : '123',
email : 'john@gmail.com'
});
var usuario2 = Ext.create('MyApp.data.Usuario',{
username : 'susan',
password : 'ok',
email : 'susana@gmail.com'
});
usuario.login();
usuario2.login();
});
</script>
</head>
<body>
</body>
</html>Podemos ver que en la consola del navegador se imprimen las dos instancias. Realmente es muy conveniente programar orientado a objetos ya que de esta manera podemos encapsular nuestro código y reutilizar una y otra vez. Este mismo principio se aplica con los widgets que tiene ExtJS ya que todo es una clase, hay algunas clases singletons que no se pueden instanciar, pero en general todos es una clase.
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.
10Comentarios
hola, hay mucha diferencia entre la version 4 y la 3?, he visto hasta ahora que cambiaste la forma de declarar una nueva ventana, y para este video el tema de las clases, que creo que no se habia visto con la version 3 (no muy a fondo al menos), sin embargo la forma de crear ventanas Ext.Window sigue funcionando en la version 4, x eso mi duda. te felicito por tus videos, son muy buenos, hasta ahora me has ayudado bastante. saludos.
Si, la librería cambió mucho de la versión 3 a la 4, aunque existe cierta compatibilidad realmente migrar una aplicación de la versión 3 a la 4 es muy complicado si no es que imposible. Prácticamente hay que iniciar de nuevo O.o. Saludos
Hola una cuestión acerca del entorno de desarrollo, ¿existe algún entorno de desarrollo que autocomplete código, métodos etc...?, veo que utilizas sublime, como nunca lo he utilizado no se si autocompleta, hay que instalar algún plugin gracias
Hola Jose, personalmente utilizo snippets para crear clases, definir métodos, constructores, etc... revisa este repositorio con algunos ya disponibles y listos para usarse: https://github.com/rdougan/Sencha.sublime Saludos
Por fin pude entender el concepto de clase....muchas gracias, Tienes una pedagogía envidiable
hola buen dia he realizado el ejemplo con exito, pero tengo un inconveniente en mi caso quiero que el metodo me retorne un valor desde el sitio de donde instancio la clase. al hacerlo me regresa "undefined" y no el valor que coloco a retornar. ayuda porfa!! gracias de antemano
Hola buen dia disculpa esque estaba viendo el video en la mañana sobre Herencia pero al ir al siguiente video no me deja cargarlo (al principio pense que era mi maquina pero ahora pasa en todos los videos al momento de reproducir no funciona o me marca error). espero si se puede arreglar de antemano Gracias
mmmmm.... Intenta descargarlo y avísame si eso si te permite hacerlo. Los videos están alojados en Vimeo, así que no se me ocurre porqué podría estar fallando.
El único problema que se me ocurre es que el tiempo de visualización expiró, intenta simplemente refrescar la página para que el tiempo de visualización se refresque, es lo único que se me ocurre por ahora. Avísame si eso te funciona. Saludos
Hola, recién me incorporo al sitio...ha pasado un tiempo de esta publicación...ahora están en la versión 6...casi 7 y se basa en la arquitectura MVVM...hay posibilidad de un vistazo de ello?