Taller de Ext JS, desarrollo de interfaces e integración con Ext JS

1. Integración de Ext JS con CodeIgniter Ing. Crysfel Villa

2. Javascript Lenguaje interpretado Se ejecuta en un explorador Nos permite manipular el DOM Agregar eventos Crear efectos Desarrollar aplicaciones RIA

3. Funciones function nombre(){ //contenido de la función }

4. Objetos var obj1 = newObject(); obj1.nombre = “pedro”; obj1.edad = 21; var obj2 = { nombre: “Pedro”, edad: 21 }

5. JSON JavaScriptObjectNotation Formato de transferencia de información { “llave” : “valor”, “coleccion”: [1,2,3,4] }

6. Ext JS Es un framework que nos permite crear interfaces de usuario de manera muy sencilla. Contiene componentes como ventanas, tablas, tabs. Nos proporciona utilierías para formato de fecha, de moneda, etc. Soporte para Ajax y Remoting Manipulación de DOM y Eventos Drag & Drop

7. Importar Ext JS en CI Descomprimir ext-3.0.0.zip Copiar dentro del proyecto de CI Importar en el “view” que utilizaremos Estilos Adapter Librería completa <link rel="stylesheet" type="text/css" href="<?phpechobase_url(); ?>js/ext-3.0.0/resources/css/ext-all.css" /> *Cargar el “url” helper

8. Cuando el DOM este listo… Ext.onReady(function(){ //aquí codificamos nuestra aplicación });

9. Una ventana varwin = new Ext.Window({ title: 'Entradas en el blog', width:600, height:350, layout:'fit', html: ‘Ejemplo de una ventana!’ }); win.show();

10. Un grid Primero necesitamos crear nuestro controller con la información que desplegaremos Utilizando un Store solicitamos la información con Ajax (<?php echo base_url(); ?>index.php/post/getPosts) Creamos el Grid con la información que tenemos en el Store

11. Usando las regiones Existen layouts crear interfaces amigables, usamos un “layout:border” para crear regiones en un panel contenedor Existen varias regiones “north, west,east,south, center” Es obligatorio utilizar la región “center”

12. Accordion Podemos utilizar el layout “accordion” para crear paneles colapsables. Podemos agregar iconos a los títulos de cada panel Para poner un icono tenemos que crear una clase en CSS .home-icon{ background:transparenturl(images/house.png) 0 0 no-repeat !important; }

13. Toolbar Utilizando la propiedad “tbar” podemos crear un barra de herramietas con botones e iconos.

14. Tabs Para crear Tabs utilizamos el componente “Ext.TabPanel” que recibe otros “Paneles” que serán los Tabs. Si queremos que aparesca activo un panel desde el inicio utilizamos la propiedad “activeTab”

15. Editor ExtJS cuenta con un editor de texto el cual podemos utilizar creando una instancia del componente “Ext.form.HtmlEditor”

16. Ajax Para hacer peticiones al servidor atravez de Ajax usamos el componente “Ext.Ajax” ejecutando el método “request”. Si necesitamos enviar parámetros usamos la propiedad “params” que es un objeto con los parámetros que enviaremos.

17. Preguntas Crysfel Villa www.quizzpot.com training@quizzpot.com