Conociendo al objeto “Element” Más videos
Comentarios: 10
Likes: 0 Persona
Duración: 13.17 minutos
Dificultad: Intermedio
Descripción del tema
Cuando necesitamos trabajar con elementos del DOM (Document Object Model) es de suma importancia conocer el objeto “Element” pues contiene métodos que nos facilitará el trabajo.
Esperar cuando el DOM esté listo para usarse
Hemos visto en los primeros temas de este curso como lograr esto, en esta ocasión utilizaré un objeto debidamente empaquetado para explicar el funcionamiento del objecto "Element", de esta manera evitamos conflictos con cualquier otro código de terceros.//se crea el “paquete”
Ext.namespace('com.quizzpot.tutorial');
com.quizzpot.tutorial.Element = {
init: function(){
//el código del tutorial irá aquí
}
}
//Cuando el DOM esté listo se invoca la función “init”
Ext.onReady(com.quizzpot.tutorial.Element.init,com.quizzpot.tutorial.Element);
Es importante mencionar que el segundo parámetro que se le pasa al evento “onReady” es el contexto donde se ejecutará.
Obtener un elemento
Normalmente utilizamos el método “document.getElementById” para tomar elementos del documento mediante su identificador, con Ext JS podemos obtener los elementos de la siguiente manera:var el = Ext.Element.get('my_id');
// o simplemente el atajo
var el = Ext.get('my_id');
Existen numerosas ventajas al utilizar este método ya que no solamente regresa el elemento del DOM sino que retorna un objeto con métodos y propiedades que podemos utilizar para manipularlo, por ejemplo para agregar o quitar clases CSS lo hacemos de la siguiente manera:
//tomamos el elemento “panel”
var el = Ext.get('panel');
//se le agrega la clase “element”
el.addClass('element');
//le quitamos la clase “anotherClass” al elemento
el.removeClass('anotherClass');
También podemos agregarle estilos al elemento de una manera muy sencilla utilizando el método “setStyle” de la siguiente manera:
//un estilo a la vez
el.setStyle('background-color','#CFE5FA');
el.setStyle('border','1px solid #99BBE8');
// o varios al mismo tiempo
el.setStyle({
'background-color','#CFE5FA',
'border','1px solid #99BBE8'
});
Existen muchos métodos más que están disponibles y que nos pueden ayudar para trabajar eficientemente. En el siguiente ejemplo se muestran varios de ellos:
//Centrar el elemento en la pantalla
el.center();
//cambiar la opacidad del elemento a 85%
el.setOpacity(.85);
//obteniendo el padre del elemento
var parent = el.parent();
//agregando algunos estilos al padre
parent.setStyle({
'background-color':'#ccc',
'font-family':'"Trebuchet MS",Arial,sans-serif',
'font-size':'.9em'
});
//el contenido se hace no seleccionable
el.unselectable();
//elimina el elemento del DOM
el.remove();
Mejorado el rendimiento
Si solamente necesitamos modificar alguna propiedad de un elemento en una sola línea de código y no necesitamos tener una referencia a ese objeto es conveniente utilizar el método “fly” de la clase “Element”, pues nos permite ahorrar memoria del explorador ya que no crea una instancia de la clase Element para que el objeto sea manipulado sino que utiliza la misma memoria una y otra vez, por ejemplo para cambiar un estilo sería de la siguiente manera:Ext.Element.fly('footer').setStyle('border','1px solid #aaa');
// o el atajo
Ext.fly('footer').setStyle('border','1px solid #aaa');
Conclusiones
La clase “Ext.Element” puede ser utilizada con frecuencia en nuestros proyectos para manipular el DOM, por eso es importante conocer los métodos que contiene para utilizarlos cuando sea conveniente. Te recomiendo ver el API de esta clase para conocerla mejor.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, 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 Aprendiendo Ext JS 3, 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 que bueno que hay videos para esta pate, es un curso muy interesante ademas de muy dinamico y explicas bien las cosas. Despues de este estaria bueno uno de java jejejeje... :) saludos
Wow.. realmente es un frameworks con caracteristicas muy interesantes..
antes.. me reafirmo en que la forma de presentacion del curso es inmejorable... revisando tu ejemplo: 1. //un estilo a la vez 2. el.setStyle('background-color','#CFE5FA'); 3. el.setStyle('border','1px solid #99BBE8'); 4. // o varios al mismo tiempo 5. El.setStyle({ 6. 'background-color','#CFE5FA', 7. 'border','1px solid #99BBE8' 8. }); Da error xq el elemento "el" tomado del DOM en la linea 5 esta con mayuscula: "El" ..ExtJS diferencia mayusculas de minisculas en todas sus declaraciones
Gracias por la observación, correjido :)
Estado viendo los tutos y pues son fantasticos, estoy empesando recien con ExtJs y con este material se aprende muy bien. Felicitaciones a la persona que hace posible esto, de verdad te agradesco y mis felicitaciones. Saludos desde Trujillo - Perú
Excelentes tutoriales, pero una consulta, en el 4° cuadro de códigos, donde vemos: //un estilo a la vez el.setStyle('background-color','#CFE5FA'); el.setStyle('border','1px solid #99BBE8'); // o varios al mismo tiempo el.setStyle({ 'background-color','#CFE5FA', 'border','1px solid #99BBE8' }); el ultimo setStyle no tendría que ser: //un estilo a la vez el.setStyle('background-color','#CFE5FA'); el.setStyle('border','1px solid #99BBE8'); // o varios al mismo tiempo el.setStyle({ 'background-color':'#CFE5FA', 'border','1px solid #99BBE8' }); o sea, 2 puntos entre la propiedad y su valor; y luego separar las propiedades entre comas, en vez de las continuas comas que estan? Saludos desde Posadas, Misiones Argentina.
voy de nuevo, en vez de: el.setStyle({ ‘background-color’,'#CFE5FA’, ‘border’,’1px solid #99BBE8? }); ser: el.setStyle({ ‘background-color’ : '#CFE5FA’, ‘border’ : ’1px solid #99BBE8? }); saludos
[quote] Crysfel Jan 18, 2010 Gracias por la observación, correjido :) [/quote] Se dice "corregido", corregido :)
Gracias :)
En verdad que esta muy bien el tutorial, creo que se vienen los aportes voluntarios...