This page looks best with JavaScript enabled

[Sencha]Instalando Ext JS 4 conociendo un poco el framework

 ·   ·   5 min read

Ahora comenzaremos a conocer Ext JS 4, que es como se trabaja con el y ¬†un peque√Īo ejemplo en los proximos dias bueno semanalmente ire dando o explicando una funci√≥n especifica de este framework.

¬ŅQu√© es ExtJS?

De acuerdo a la definición de su página web de ExtJS es una librería Javascript que permite construir aplicaciones complejas en Internet. Esta librería incluye:

  • Componentes UI del alto performance y personalizables.
  • Modelo de componentes extensibles.
  • Un API f√°cil de usar.
  • Licencias Open source y comerciales.

Versiones

  • Ext JS 1.1. Liberaci√≥n final: 1 de agosto de 2007. Puede ejecutarse como una aplicaci√≥n independiente (stand-alone).
  • Ext JS 2.0. Liberada el 4 de diciembre de 2007. Su atractivo radicaba en ofrecer interfaces y elementos similares a loas aplicaciones de escritorio. Tambi√©n inclu√≠a documentaci√≥n de su API y ejemplos. No tiene compatibilidad con su versi√≥n anterior, la 1.X por lo que era forzoso efectuar un plan de migraci√≥n.
  • Ext JS 2.0.1. Liberaci√≥n final: 23 de enero de 2008. Principalmente arreglaba varios errores detectados en la versi√≥n 2.0.
  • Ext JS 2.1. Liberaci√≥n final: 21 de abril de 2008. Soporte para REST.
  • Ext JS 2.2. Liberaci√≥n final: 4 de agosto de 2008.
  • Ext JS 3.0. Liberaci√≥n final: 10 de agosto de 2009. Mejoras en consistencia y manejo de memoria. Es la primera versi√≥n que aparece con el nombre Ext JS.
  • Ext JS 3.1. Liberaci√≥n final: 17 de diciembre de 2009. Mejoras en desempe√Īo en Internet Explorer. Optimizaci√≥n de Layouts. Nuevos componentes como el TreeGrid.
  • Ext JS 3.2. Liberaci√≥n final: 7 de abril de 2010. Nuevos elementos como SliderTip, SliderField. Mejorar de desempe√Īo en Box Layouts, AnchorLayout y ColumnLayout. Ordenamiento y filtrado m√ļltiple en elementos Store. Transiciones animadas para elementos DataView.
  • Ext JS 3.3. Liberaci√≥n final: 11 de octubre de 2010. Agreg√≥ los elementos PivotGrid, ActionColumn y nuevos componentes para el manejo de Calendarios.
  • Ext JS 4.0. Liberaci√≥n final: 26 de abril de 2011. Incluye una refactorizaci√≥n de todo el framework2 entre lo que cabe destacar una nueva estructura de clases3 y carga din√°mica de objetos,4 paquete de datos,5 nuevos gr√°ficos6 y temas.7

Todas las versiones suelen tener compatibilidad con la versión anterior a excepción de la 1.X.

RIA

Que carambolas  :@ es eso, me costo comprender este punto fundamental con respecto a ExtJS  y la nueva tendencia que llevamos hace tiempo en la web. RIA, acrónimo de Rich Internet Applications (Aplicaciones Ricas en Internet) brindando una experiencia de usuario muy parecida o igual a la que se tiene en las aplicaciones de escritorio.

ExtJS encaja dentro de este esquema como un motor que permite crear aplicaciones RIA mediante Javascript. Si enmarcamos a ExtJS dentro del desarrollo RIA, éste seria el render de la aplicación que controla el cliente y que ese encarga de enviar y obtener información del servicio.

¬ŅPreparando el Arsenal?

La mejor forma de comenzar a trabajar con Ext JS es tener a la mano las siguientes herramientas:

  1. AptanaPost! donde explico como instalar Aptana de manera correcta, y sin ningun problema( ;) mi recomendación ) tambien tenemos la opción de trabajar con WebStorm u otros.
  2. Web Developer para Chrome/Chronium.
  3. Web Developer para Firefox.
  4. Ext JS.
  5. Servidor instalado con tener Apache  MySQL basta.
  6. Paciencia   y tiempo =).

Instalando  ExtJs

Como indique arriba necesitamos tener instalado un servidor,  y bajamos el paquete desde la pagina web de Sencha Descarga. Luego de esto lo descomprimimos en nuestro www donde tenemos instalado.

Ext JS 

Iniciamos nuestro IDE en mi caso Aptana y configuramos nuestro workspace.

Workspace /var/www

Y luego creamos  nuestro nuevo proyecto en este caso usaremos un proyecto web, y sin hacer uso de ninguna plantilla, luego de esto tendremos en el www una nueva carpeta con el nombre que dimos al proyecto.

La instalaci√≥n bueno supuesta porque en realidad solo usamos las librerias necesarias en nuestro proyecto, asi que como estaremos en un ambiente de desarrollo necesitamos instalar “ext-all.dev” como del mismo los estilos para que los componentes se visualizen correctamente.

Este ejemplo solo usaremos lo necesario y básico, teniendo el siguiente árbol de las carpetas

Lo primero que debemos hacer es crear nuestro archivo o archivos principales, estos ser√°n nuestro archivo index.html,la carpeta JS que contendra apenas dos .js de ExtJS los que necesitamos son

- ext-all-dev.js

Los resources de ExtJS completo =), y la 3 carpeta padre es Services donde pondremos  el msg-box.js

Ahora armaremos la misma estructura, con el siguiente contenido

index.html

Primeros pasos con Sencha ExtJS  
      
      
  
      
    <br />  
    <br />  
     
 

 **SniferL4b's**

  
   

 **Primeros pasos con Sencha ExtJS**

Presiona el boton =) 

  
  
 

Mostrar


msg-box.js

Ext.require(\[  
    'Ext.window.MessageBox',  
    'Ext.tip.\*'  
\]);  
  
Ext.onReady(function(){  
     
    Ext.get('loading').on('click', function(){  
        Ext.MessageBox.show({  
           title: 'Please wait',  
           msg: 'Loading items...',  
           progressText: 'Initializing...',  
           width:300,  
           progress:true,  
           closable:false,  
           animateTarget: 'loading'  
       });  
  
       // this hideous block creates the bogus progress  
       var f = function(v){  
            return function(){  
                if(v == 12){  
                    Ext.MessageBox.hide();  
                    Ext.example.msg('Done', 'Your fake items were loaded!');  
                }else{  
                    var i = v/11;  
                    Ext.MessageBox.updateProgress(i, Math.round(100\*i)+'% completed');  
                }  
           };  
       };  
       for(var i = 1; i < 13; i++){  
           setTimeout(f(i), i\*500);  
       }  
    });  
  
     
});  

Luego nos dirigimos a http://127.0.0.1:8020/SniferL4bs/index.html y listo tendremos el siguiente resultado, en esta prueba usamos un poco de un progressbar como veran no fue necesario realizar mucho codigo

Primer ejemplo con Sencha ExtJS

Y lo mas interesante de Sencha ExtJS que tenemos los ejemplos del mismo en el mismo archivo que bajamos en mi caso el path es este www/extjs/examples/index.html.

Así que pueden ir avanzando, y aprendiendo mas del mismo  :), la próxima entrada iremos conociendo de ExtJS.

Share on
Support the author with

Avatar
WRITTEN BY