extjs Tutorial
Empezando con extjs

Observaciones

Versiones

Creando una aplicación Hello World - Via Sencha Cmd

Este ejemplo demuestra la creación de una aplicación básica en ExtJS utilizando Sencha Cmd para iniciar el proceso. Este método generará automáticamente algún código y una estructura de esqueleto para el proyecto.

Abra una ventana de la consola y cambie el directorio de trabajo a un espacio apropiado para trabajar. En la misma ventana y directorio, ejecute el siguiente comando para generar una nueva aplicación.

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 

Nota: el indicador -sdk especifica la ubicación del directorio extraído del archivo del marco.

En ExtJS 6+, Sencha ha fusionado los frameworks ExtJS y Touch en una base de código única, diferenciada por los términos clásico y moderno respectivamente. Para simplificar, si no desea apuntar a dispositivos móviles, se puede especificar un indicador adicional en el comando para reducir el desorden en el área de trabajo.

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 

Sin ninguna configuración adicional, una aplicación de demostración completamente funcional ahora debería residir en el directorio local. Ahora cambie el directorio de trabajo al nuevo directorio del proyecto HelloWorld y ejecute:

> sencha app watch

Al hacer esto, el proyecto se compila utilizando el perfil de compilación predeterminado y se inicia un servidor HTTP simple que permite ver la aplicación localmente a través de un navegador web. Por defecto en el puerto 1841 .

Instalación y configuración

El uso típico de ExtJS aprovecha el marco para construir aplicaciones enriquecidas de una sola página (RIA). La forma más sencilla de comenzar es hacer uso de Sencha Cmd , una herramienta de creació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
• Gestión de 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, uno de:

• inicie sesión en Sencha Support para obtener la versión comercial de las licencias ( página del producto )
• Solicite una copia de evaluación que será válida por 30 días.
• Solicite 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 de Cómo comenzar para obtener una guía completa de los proyectos de ExtJS.

Después de instalar Sencha Cmd, su disponibilidad se puede verificar abriendo una ventana de la 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 esto se requerirá en más ejemplos.

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

Vamos a empezar a usar ExtJS para construir 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 un archivo JavaScript, generalmente index.html y app.js.

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

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

Paso 1: crear 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.

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.

Paso 3: Agregar referencias Ext Js 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
• app.js

Sencha se ha asociado con CacheFly, una red de contenido global, para proporcionar alojamiento CDN gratuito para el marco de trabajo de ExtJS. En este ejemplo, 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 lugar de copias de seguridad en caso de que el CDN no estuviera disponible.

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

Aparte de estos archivos, tenemos un marcador de posición donde se representará la interfaz de usuario. En este ejemplo, tenemos un div con id "espacios en blanco" que usaremos más adelante para representar la interfaz de usuario.

<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 manera de administrar el código en un patrón MVC. Como se muestra en la captura de pantalla, tenemos una carpeta de contenedor para nuestra aplicación ExtJS, en este caso 'aplicación'. Esta carpeta contendrá todo nuestro código de aplicación dividido en varias carpetas, es decir, modelo, vista, controlador, tienda, etc. Actualmente, solo tiene el archivo app.js.

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 aplicaciones (modelos, vistas, controladores, tiendas) residirán en el espacio de nombres único. El lanzamiento 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.