Extjs , Panel - Form - Grid

Facultad Regional “Mártires de Artemisa”

Proyecto Dirección Importaciones

Nombre de la Tarea:

Estudiar el funcionamiento de ExtJS y los componentes básicos (panel, forms, store,proxy,grid) 24451 09/22/2011 09/26/2011 Sulén Quesada Hernández

No. de Tarea: Fecha de Inicio: Fecha de Fin: Autora:

Facultad Regional “Mártires de Artemisa”

Proyecto Dirección ImportacionesContenido
Funcionalidades ............................................................................................. 3 Componentes de Extjs.................................................................................... 4 Panel: ........................................................................................................ 4Forms:...................................................................................................... 10 ¿Que es un Store?.................................................................................... 17 Proxy:........................................................................................................ 20 Grid:......................................................................................................... 21Conclusiones................................................................................................ 24 Bibliografía................................................................................................... 25

Facultad Regional “Mártires de Artemisa”

Proyecto Dirección Importaciones

Funcionalidades
Funcionalidades de extjs: Dispone de un conjunto de componentes (widgets) para incluirdentro de una aplicación web, como: • Cuadros y áreas de texto. • Campos para fechas. • Campos numéricos. • Combos. • Radiobuttons y checkboxes. • Editor HTML. • Elementos de datos (con modos de sólo lectura, datos ordenables, columnas que se pueden bloquear y arrastrar, etc.). • Árbol de datos. • Pestañas. • Barra de herramientas. • Menús al estilo de Windows. • Paneles divisibles en secciones. •Sliders.

Facultad Regional “Mártires de Artemisa”

Proyecto Dirección Importaciones

Componentes de Extjs Panel:
El panel es un componente básico dentro del Framework de Ext JS ya que muchos componentes heredan de éste, es por eso que conocer su funcionamiento es fundamental. Un panel es un contenedor con funcionalidades específicas que nos permiten construir perfectamente interfaces deusuario, entre algunas características podemos agregarle barras de herramientas superiores e inferiores, botones en la parte inferior o hacer que pueda colapsarse. Los paneles pueden ser fácilmente asignados a cualquier otro contenedor. Ejemplo:
var main = new Ext.Panel({ title: 'Titulo del panel', width:250, height:300, renderTo: 'frame', //el elemento donde será insertado html: 'Contenido delpanel' });

La propiedad “renderTo” acepta el “id” del nodo en el DOM en el cual será insertado el panel que estamos creando.

Facultad Regional “Mártires de Artemisa”

Proyecto Dirección Importaciones

Existen otras formas de agregarle contenido al panel como por ejemplo:
var main = new Ext.Panel({ title: 'Panell', width:250, height:300, contentEl: 'content' //usamos un elemento delDOM como contenido }); main.render('frame');

En este ejemplo el contentEl es el encargado de agregarle el contenido al panel mediante el id content. También podemos utilizar la propiedad “autoLoad”, de esta manera cuando creamos la instancia automáticamente se solicitará el contenido mediante una llamada Ajax.
var main = new Ext.Panel({ title:'Titulo del panel', width:250, height:300,autoLoad:'pgEjemplo.php' // El contenido será sacado de aquí automáticamente }); main.render('frame');

Facultad Regional “Mártires de Artemisa”

Proyecto Dirección Importaciones

Otra opción es insertar otros componentes de Ext JS, pueden ser Paneles, Tabs o pestañas, árboles, acordeones, formularios, etc. Para hacer esto primero necesitamos crear el componente que necesitemos agregar y después...