La clase “DomHelper” Más videos
Comentarios: 14
Likes: 0 Persona
Duración: 16.11 minutos
Dificultad: Intermedio
Descripción del tema
Ext JS cuenta con una utilería para manejar el DOM de una manera sencilla, así que en este tema veremos como crear elementos, aplicar estilos e insertarlos en el DOM.
Material de apoyo
Es necesario descargar el material de apoyo para realizar este tutorial, el cual es un documento HTML que incluye a la librería de Ext JS, algunos estilos y un “div” en el “body” para realizar los ejemplos de este tema, el documento en JavaScript está vacío.Definiendo el namespace del tutorial
Antes de comenzar a ver la clase DomHelper vamos a “empaquetar” el código que estamos por escribir para evitar problemas con otras librerías, esto lo hacemos de la siguiente manera:Ext.namespace('com.quizzpot.tutorial');
com.quizzpot.tutorial.DomHelper = {
init: function(){
//El código del tutorial irá aquí
}
}
Ext.onReady(com.quizzpot.tutorial.DomHelper.init,com.quizzpot.tutorial.DomHelper);
Cuando el DOM esté listo para utilizarse se ejecuta la función “init”, por lo tanto vamos a escribir el código dentro de esta función para que sea ejecutado inmediatamente.
Crear elementos
Es muy fácil crear elementos con esta utilería, simplemente tenemos que saber donde queremos insertar el nuevo elemento y definir el contenido que necesitemos insertar.var list = Ext.DomHelper.append('content',{
id: 'my-list', tag:'ul', children:[
{tag:'li',children:[{tag:'a',href:'#',html:'Hello world!'}]},
{tag:'li',html:'Item 2'},
{tag:'li',html:'Item 3'},
{tag:'li',html:'Item 4'}
]
},true);
Mediante el método “append” insertamos un elemento al documento, el primer parámetro es el lugar donde se va a insertar, en este caso es el “ID” de un elemento (div) que está definido en el documento HTML pero puede ser un objeto de tipo “Ext.Element”; el segundo argumento es un objeto que va a ser insertado dentro del elemento asignado en el primer argumento, a este objeto se le ha definido un “id”, un “tag” y los “children”; la propiedad “id” actuará como el identificador del elemento, la propiedad “tag” se utiliza para definir el elemento a crear, en este caso una lista “ul” pero se puede definir cualquier elemento HTML que sea válido, opcionalmente se le pueden agregar hijos (children) mediante un arreglo de objetos.
Aplicar estilos
Mediante la clase DomHelper podemos modificar los estilos de un elemento de una forma muy sencilla.Ext.DomHelper.applyStyles('my-list',{
'border':'5px solid #ddd',
'padding':'5px',
'background-color':'#f8f8f8'
});
Ext.DomHelper.applyStyles('my-list','border:5px solid #ddd;padding:5px;background-color:#f8f8f8');
Únicamente es necesario especificar el elemento que deseamos modificar y como segundo parámetro definimos un objeto o un String con los estilos que necesitamos aplicarle al elemento.
Insertar elementos
La clase DomHelper cuenta con varios métodos para insertar elementos al DOM, podemos utilizar estos métodos para especificar el lugar exacto donde queremos hacerlo.Ext.DomHelper.insertBefore('my-list',{tag:'p',html:'Hey esto es un parrafo.'});
Ext.DomHelper.insertAfter('my-list',{tag:'p',html:'Soy otro parrafo, insertado mediante javascript.'});
Utilizando el método “insertBefore” podemos insertar el nuevo elemento antes del elemento que le especificamos, en este caso “my-list”, también se puede utilizar el método “insertAfter” para insertar el elemento después del elemento indicado.
Conclusiones
Manipular el DOM es esencial para cuando creamos interfaces personalizadas, es por esto que es importante comprender y conocer el uso de esta clase que nos facilitará muchas cosas. Si todavía no te has inscrito al rss, te recomiendo lo hagas para recibir actualizaciones, y como siempre si tienes alguna duda o sugerencia puedes hacerla en los comentarios.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.
14Comentarios
estaba impaciente por un nuevo tuto ;). Gracias!!
El tutorial esta muy bien pero hay temas que si no estan los videos cuesta mas entenderlos...jeje
Excelentes los tutoriales, muchas gracias amigo!
Hola estoy iniciando con ext y no me queda claro como tomar la respuesta json de un php y mostrarlo en un formulario, puedo insertar nuevos registros y el script php me retorna el array json con los datos que necesito pero no logro mostrarlos en el formulario o grid; agradeceria que me ayudaras en esto.
Mira, te recomiendo leer el siguiente tutorial http://www.quizzpot.com/2009/08/llenar-formularios-con-informacion-del-servidor/
Muchas gracias por la sugerencia, lo que al final hice fue revisar los nombres de los campos de la respuesta en json para que coincidieran en orden de aparicion, y por fin el resultado ya anda bien, creo que mi problema real es no saber como donde y por que utilizar ciertos componentes como el Store. Ahora mi reto esta en echar a andar el grid. Gracias Crysfel.
Cryz tengo un error en este parte {tag:'li',children:[{tag:'a',href:'#',html:'Hello world!'}]},
este es el error: Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
MUCHAS GRACIAS PETERO!
una duda es q el background-color no lo esta tomando osea no se ve el color que se le coloque. gracias
Hola, como podria agregar un elemento DOM a un objeto window? desde ya gracias por tu ayuda =)
Puedes usar la propiedad "contentEl" que recibe el ID del elemento que quieres poner como contenido del panel o ventana. Saludos
En este tutorial comentas que con el método “append” insertamos un elemento al documento, el primer parámetro es el lugar donde se va a insertar, en este caso es el “ID” de un elemento (div) que está definido en el documento HTML pero puede ser un objeto de tipo “Ext.Element”; que ejemplo de objeto Ext.Element podríamos utilizar? aún no me queda muy claro el concepto
Podrías agregar elementos al body de un panel por ejemplo, o al elemento de un componente. var component = new Ext.Component({renderTo:Ext.getBody()}); component.on('render',function(){ Ext.DomHelper.append(component.el,{ ... }); }); Saludos