code igniter + ext js
DESCRIPTION
Taller de Ext JS, desarrollo de interfaces e integración con Ext JSTRANSCRIPT
![Page 1: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/1.jpg)
INTEGRACIÓN DE EXT JS CON CODE IGNITER
Ing. Crysfel Villa
![Page 2: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/2.jpg)
Javascript
Lenguaje interpretado Se ejecuta en un explorador Nos permite manipular el DOM Agregar eventos Crear efectos Desarrollar aplicaciones RIA
![Page 3: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/3.jpg)
Funciones
function nombre(){//contenido de la función
}
![Page 4: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/4.jpg)
Objetos
var obj1 = new Object();obj1.nombre = “pedro”;obj1.edad = 21;
var obj2 = {nombre: “Pedro”,edad: 21
}
![Page 5: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/5.jpg)
JSON
JavaScript Object Notation Formato de transferencia de
información
{“llave” : “valor”,“coleccion”: [1,2,3,4]
}
![Page 6: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/6.jpg)
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
![Page 7: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/7.jpg)
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="<?php echo base_url(); ?>js/ext-3.0.0/resources/css/ext-all.css" />
*Cargar el “url” helper
![Page 8: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/8.jpg)
Cuando el DOM este listo…
Ext.onReady(function(){
//aquí codificamos nuestra aplicación
});
![Page 9: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/9.jpg)
Una ventana
var win = new Ext.Window({title: 'Entradas en el blog',width:600,height:350,layout:'fit',html: ‘Ejemplo de una ventana!’
});
win.show();
![Page 10: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/10.jpg)
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
![Page 11: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/11.jpg)
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”
![Page 12: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/12.jpg)
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:transparent url(images/house.png) 0 0
no-repeat !important;}
![Page 13: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/13.jpg)
Toolbar
Utilizando la propiedad “tbar” podemos crear un barra de herramietas con botones e iconos.
![Page 14: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/14.jpg)
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”
![Page 15: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/15.jpg)
Editor
ExtJS cuenta con un editor de texto el cual podemos utilizar creando una instancia del componente “Ext.form.HtmlEditor”
![Page 16: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/16.jpg)
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.
![Page 17: Code Igniter + Ext JS](https://reader036.vdocuments.co/reader036/viewer/2022082416/558bee3ad8b42a264f8b464c/html5/thumbnails/17.jpg)
Preguntas
Crysfel Villawww.quizzpot.com