Code Igniter + Ext JS

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

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

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

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

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

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

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

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

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

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

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”

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;
}

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

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”

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

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.

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

http://www.quizzpot.com	529
http://spotgeek.net	73
http://www.slideshare.net	63
http://feeds2.feedburner.com	2
http://health.medicbd.com	1

Code Igniter + Ext JS

by Crysfel Villa on Oct 23, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 668

Statistics

Code Igniter + Ext JS — Presentation Transcript