• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Code Igniter + Ext JS
 

Code Igniter + Ext JS

on

  • 9,651 views

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

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

Statistics

Views

Total Views
9,651
Views on SlideShare
8,816
Embed Views
835

Actions

Likes
4
Downloads
156
Comments
0

5 Embeds 835

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Code Igniter + Ext JS Code Igniter + Ext JS Presentation Transcript

    • 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