From Learn About the Ext JavaScript Library

Contents 1 Introducción 1.1 Escenario 1 - Principiante 1.2 Escenario 2 - Pro 2 Muéstrame Como

Introducción

Escenario 1 - Principiante

Haz escuchado de Ext, haz visto los ejemplos online, hasta haz comenzado a leer la API. Aceptémoslo, te causa comezón comenzar a jugar con Ext, pero no tienes un servidor de prueba a mano para jugar!

Escenario 2 - Pro

Estás escarvando en la API y ves un método que se ve interesante el cual te encantaría probar ahora mismo pero realmente no puedes inoportunarte escribiendo una página html de prueba que incluya todos los recursos apropiados solo para probar un método.

Cualquiera sea la razón, esta es una manera rápida de jugar con Ext ahora mismo, sin necesitar un servidor de prueba. Vas a necesitar Firefox con Firebug instalado para hacer esto, pero realmente, si aún no te lo habías instalado hazte un favor e instálatelo ya!

Muéstrame Como

• Enciende la Documentación de la API de Ext. Es probable que ya la tengas abierta de todos modos.
• Presiona F12 para abrir la consola de Firebug (estás ejecutando Firebug, cierto?)
• Si tu consola de firebug es una sola línea que se ve como algo asi '>>>' haz click en la pequeña flecha roja de la esquina inferior derecha para expandir la consola a una versión multilínea
• Escribe lo siguiente como primera línea y presiona Ctrl-Enter para ejecutarlo:

Ext.get(document.body).update('<div id="test"></div>');

Lo que hace la línea de arriba es reemplazar el cuerpo del DOM con un simple div (con el id test). El contenido del cuerpo se ha ido pero la biblioteca Ext aún está cargada y lista para que juegues con ella.

Ahora, asumamos que haz estado navegando por la API de Ext.Panel y quieres ver con tus propios ojos cuan fácil es crear un nuevo objeto Panel. Agrega las siguientes líneas a tu código en firebug:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

Presiona Ctrl-Enter de nuevo, y listo, tu nuevo panel está creado en la página.

Bueno, ahora quieres saber que sucede si añades otra opción, digamos, habilitar la propiedad collapsible. Tu código está aún en firebug, así que agregas una línea más con la nueva opción de configuración:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content',
	collapsible: true
});

Presiona Ctrl-Enter e inmediatamente puedes ver que aparece el interruptor plegable en la esquina superior derecha del panel.

Cada vez que presionas Ctrl-Enter la primera línea reemplaza cualquier cosa que hayas añadido al DOM en las previas ejecuciones, de esta forma puedes mantener un lienzo en blanco con el cual trabajar. Es un truco simple pero es increíblemente útil cuando quieres ver de buenas a primeras lo que las abundantes opciones de configuración pueden hacer.

Puedes agregar cuanto HTML como necesites en la cadena pasada al método update() en la primera línea, y luego escribir todo el Javascript que quieras para explorar la API de Ext.

Ahora comienza a jugar con la API tú mismo!

• Ext Programmer's API Documentation
• Ext User Forums