Primeros pasos con extjs

Creación de una aplicación Hello World: a través de Sencha Cmd

Instalación y configuración

El uso típico de ExtJS aprovecha el marco para crear aplicaciones enriquecidas (RIA) de una sola página. La forma más sencilla de comenzar es utilizar Sencha Cmd, una herramienta de compilación de CLI que cubre la mayoría de las preocupaciones generales en un ciclo de vida de implementación, principalmente:

  • gestión de paquetes y dependencias
  • compilación de código / agrupación y minificación
  • gestionar estrategias de construcción para diferentes objetivos y plataformas

» Descargar Sencha Cmd


El segundo paso es descargar el SDK, ExtJS es un producto comercial - para obtener una copia, una de:

  • inicie sesión en [Sencha Support][sencha-support] para la versión con licencia comercial (página del producto)
  • solicitar una copia de evaluación que tendrá una validez de 30 días
  • solicitar la versión GPL v3 disponible para proyectos de código abierto
    (tenga en cuenta que es posible que no pueda acceder a la última versión con esta opción)

Después de descargar el SDK, asegúrese de extraer el archivo antes de continuar.


Nota: consulte la documentación oficial Getting Started para obtener una guía completa de los proyectos ExtJS.

Después de instalar Sencha Cmd, se puede verificar su disponibilidad abriendo una ventana de consola y ejecutando:

> sencha help

Ahora tenemos las herramientas necesarias para crear e implementar aplicaciones ExtJS, tome nota de la ubicación del directorio donde se extrajo el SDK, ya que será necesario en otros ejemplos.

Creación de una aplicación Hello World – Manualmente

Comencemos a usar ExtJS para crear una aplicación web simple.

Crearemos una aplicación web simple que tendrá solo una página física (aspx/html). Como mínimo, cada aplicación ExtJS contendrá un archivo HTML y uno JavaScript, generalmente index.html y app.js.

El archivo index.html o su página predeterminada incluirá las referencias al código CSS y JavaScript de ExtJS, junto con su archivo app.js que contiene el código de su aplicación (básicamente el punto de partida de su aplicación web).

Vamos a crear una aplicación web simple que utilizará los componentes de la biblioteca ExtJS:

Paso 1: Cree una aplicación web vacía

Como se muestra en la captura de pantalla, he creado una aplicación web vacía. Para hacerlo simple, puede usar cualquier proyecto de aplicación web en el editor o IDE de su elección. ingrese la descripción de la imagen aquí

Paso 2: Agregar una página web predeterminada

Si ha creado una aplicación web vacía, debemos incluir una página web que sería la página de inicio de nuestra aplicación.

ingrese la descripción de la imagen aquí

Paso 3: Agregar referencias Js Ext a Default.aspx

Este paso muestra cómo hacemos uso de la biblioteca extJS. Como se muestra en la captura de pantalla en Default.aspx, acabo de referir 3 archivos:

  • ext-all.js
  • ext-all.css
  • aplicación.js

Sencha se asoció con CacheFly, una red de contenido global, para proporcionar alojamiento CDN gratuito para el marco ExtJS. En esta muestra, he usado la biblioteca CDN de Ext; sin embargo, podríamos usar los mismos archivos (ext-all.js y ext-all.css) de nuestro directorio de proyectos en su lugar o como copias de seguridad en caso de que la CDN no estuviera disponible.

Al referirse a app.js, se cargaría en el navegador y sería el punto de partida de nuestra aplicación.

Además de estos archivos, tenemos un marcador de posición donde se representará la interfaz de usuario. En esta muestra, tenemos un div con id “espacio en blanco” que usaremos más adelante para representar la interfaz de usuario.

ingrese la descripción de la imagen aquí

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

Paso 4: agregue la carpeta de aplicaciones y app.js en su proyecto web

ExtJS nos proporciona una forma de administrar el código en un patrón MVC. Como se muestra en la captura de pantalla, tenemos una carpeta contenedora para nuestra aplicación ExtJS, en este caso, ‘aplicación’. Esta carpeta contendrá todo el código de nuestra aplicación dividido en varias carpetas, es decir, modelo, vista, controlador, tienda, etc. Actualmente, solo tiene el archivo app.js.

ingrese la descripción de la imagen aquí

Paso 5: escribe tu código en app.js

App.js es el punto de partida de nuestra aplicación; para esta muestra, acabo de usar la configuración mínima requerida para iniciar la aplicación.

Ext.application representa una aplicación ExtJS que hace varias cosas. Crea una variable global ‘SenchaApp’ proporcionada en la configuración del nombre y todas las clases de aplicación (modelos, vistas, controladores, tiendas) residirán en el espacio de nombres único. Launch es una función que se llama automáticamente cuando toda la aplicación está lista (todas las clases se cargan correctamente).

En este ejemplo, estamos creando un Panel con alguna configuración y representándolo en el marcador de posición que proporcionamos en Default.aspx.

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

Captura de pantalla de salida

Cuando ejecute esta aplicación web con Default.aspx como página de inicio, aparecerá la siguiente ventana en el navegador.

ingrese la descripción de la imagen aquí