Propiedades y Métodos Estáticos Más videos
Descripción del tema
La propiedad statics
Vamos a usar la clase Usuario que hemos estado usando en sesiones anteriores y le vamos a agregar una propiedad llamada statics, en esta propiedad se van a alojar todas las propiedades y métodos que queremos que sean de tipo estático. En este bloque vamos a agregar una propiedad llamada contador y un método llamado getNextId, lo que vamos a hacer es asignar un contador que se va a estar incrementando y lo utilizaremos para que nos regrese un identificador único.Ext.define('MyApp.data.Usuario',{
statics : {
contador : 0, //Paso 1
getNextId : function(){
return ++this.contador;
}
},
config : {
username : '',
email : '',
password : '',
nombre : '',
apellido : ''
},
constructor : function(options){
this.initConfig(options);
this.id = MyApp.data.Usuario.getNextId(); //Paso2
},
login : function(options){
console.log(this.username,this.password);
},
logout : function(){
}
});- En el paso 1 creamos la propiedad contador y luego creamos la función getNextId que es la que va a estar incrementando el contador.
- En el paso 2 creamos la propiedad id y le asignamos el valor que tiene la propiedad contador al invocar el método getNextId. Podemos ver aqui que no fue necesario crear una instancia para invocar el método getNextId.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Statics</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'
});
var cliente2 = Ext.create('MyApp.data.Cliente',{
username : 'john',
password : '123',
email : 'john@gmail.com',
calle : 'Maria Josefa 2053',
colonia : 'Ignacio Mejia'
});
console.log(cliente.id,cliente2.id);
MyApp.data.Usuario.getNextId();
MyApp.data.Usuario.getNextId();
MyApp.data.Usuario.getNextId();
var cliente3 = Ext.create('MyApp.data.Cliente',{
username : 'john',
password : '123',
email : 'john@gmail.com',
calle : 'Maria Josefa 2053',
colonia : 'Ignacio Mejia'
});
console.log(cliente3.id);
});
</script>
</head>
<body>
</body>
</html>Como podemos ver en el código anterior, podemos incluso invocar el método getNextId directamente desde el HTML sin necesidad de crear ninguna instancia.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.
2Comentarios
Tengo dudas sobre la propiedad 'id' creada en el constructor, como puede accederla la pagina de prueba sino fue declarada en el bloque config?
Esa propiedad es definida en tiempo de ejecución, es decir que es una propiedad de la instancia no de la "clase", por lo tanto no cuenta con los métodos get/set pero si es posible accederla directamente porque fue creada en el constructor.