Code Igniter + Ext JS

7.380 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
7.380
En SlideShare
0
De insertados
0
Número de insertados
836
Acciones
Compartido
0
Descargas
174
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

Code Igniter + Ext JS

  1. 1. Integración de Ext JS con CodeIgniter<br />Ing. Crysfel Villa<br />
  2. 2. Javascript<br />Lenguaje interpretado<br />Se ejecuta en un explorador<br />Nos permite manipular el DOM<br />Agregar eventos<br />Crear efectos<br />Desarrollar aplicaciones RIA<br />
  3. 3. Funciones<br />function nombre(){<br />//contenido de la función<br />}<br />
  4. 4. Objetos<br />var obj1 = newObject();<br />obj1.nombre = “pedro”;<br />obj1.edad = 21;<br />var obj2 = {<br /> nombre: “Pedro”,<br /> edad: 21<br />}<br />
  5. 5. JSON<br />JavaScriptObjectNotation<br />Formato de transferencia de información<br />{<br />“llave” : “valor”,<br /> “coleccion”: [1,2,3,4]<br />}<br />
  6. 6. Ext JS<br />Es un framework que nos permite crear interfaces de usuario de manera muy sencilla.<br />Contiene componentes como ventanas, tablas, tabs.<br />Nos proporciona utilierías para formato de fecha, de moneda, etc.<br />Soporte para Ajax y Remoting<br />Manipulación de DOM y Eventos<br />Drag & Drop<br />
  7. 7. Importar Ext JS en CI<br />Descomprimir ext-3.0.0.zip<br />Copiar dentro del proyecto de CI<br />Importar en el “view” que utilizaremos<br />Estilos<br />Adapter<br />Librería completa<br />&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;&lt;?phpechobase_url(); ?&gt;js/ext-3.0.0/resources/css/ext-all.css&quot; /&gt;<br />*Cargar el “url” helper<br />
  8. 8. Cuando el DOM este listo…<br />Ext.onReady(function(){<br />//aquí codificamos nuestra aplicación<br />});<br />
  9. 9. Una ventana<br />varwin = new Ext.Window({<br />title: &apos;Entradas en el blog&apos;,<br /> width:600,<br /> height:350,<br />layout:&apos;fit&apos;,<br />html: ‘Ejemplo de una ventana!’<br /> });<br />win.show();<br />
  10. 10. Un grid<br />Primero necesitamos crear nuestro controller con la información que desplegaremos<br />Utilizando un Store solicitamos la información con Ajax (&lt;?php echo base_url(); ?&gt;index.php/post/getPosts)<br />Creamos el Grid con la información que tenemos en el Store<br />
  11. 11. Usando las regiones<br />Existen layouts crear interfaces amigables, usamos un “layout:border” para crear regiones en un panel contenedor<br />Existen varias regiones “north, west,east,south, center”<br />Es obligatorio utilizar la región “center”<br />
  12. 12. Accordion<br />Podemos utilizar el layout “accordion” para crear paneles colapsables.<br />Podemos agregar iconos a los títulos de cada panel<br />Para poner un icono tenemos que crear una clase en CSS<br />.home-icon{<br />background:transparenturl(images/house.png) 0 0 no-repeat !important;<br />}<br />
  13. 13. Toolbar<br />Utilizando la propiedad “tbar” podemos crear un barra de herramietas con botones e iconos.<br />
  14. 14. Tabs<br />Para crear Tabs utilizamos el componente “Ext.TabPanel” que recibe otros “Paneles” que serán los Tabs.<br />Si queremos que aparesca activo un panel desde el inicio utilizamos la propiedad “activeTab”<br />
  15. 15. Editor<br />ExtJS cuenta con un editor de texto el cual podemos utilizar creando una instancia del componente “Ext.form.HtmlEditor”<br />
  16. 16. Ajax<br />Para hacer peticiones al servidor atravez de Ajax usamos el componente “Ext.Ajax” ejecutando el método “request”.<br />Si necesitamos enviar parámetros usamos la propiedad “params” que es un objeto con los parámetros que enviaremos.<br />
  17. 17. Preguntas<br />Crysfel Villa<br />www.quizzpot.com<br />training@quizzpot.com<br />

×