Codificando la Vista Principal de Nuestro Proyecto Web basado en Sencha ExtJS 6

Lo primero a ver en este caso es la secuencia necesaria para poder hacer visible la vista principal, para lograr el objetivo tenemos que tener definida la aplicacion a ejecutar como Entry Point o punto base de ejecucion por tanto se debe codificar una clase de aplicacion con la funcion launch necesaria para la ejecucion de nuestra vista principal.
Seguidamente se debe codificar la vista principal en base al patron MVVM, para esto se codificara la vista, un controlador y un modelview.

Video de explicacion aqui:

Aplicacion Principal

Nuestra aplicacion principal tendra el entry point base de la aplicacion web por lo tanto hay que definirla e incluir dentro de la misma la ejecucion del codigo de generacion de la vista principal.
La aplicacion principal incluye dos archivos dentro de la estructura de proyecto de Sencha ExtJS 6 como son:

  • application.js
  • app.js

Application se define con una clase con codigo estandar y extiende su funcionalidad de Ext.app.Application.

Application Class Sencha ExtJS 6

Application Class Sencha ExtJS 6

En app.js se incluye codigo que ejecuta la vista principal usando la funcion launch con el codigo siguiente en su interior:

Ext.create(‘app04.view.MainView’);

app.js Entry Point  Sencha ExtJS 6

app.js Entry Point Sencha ExtJS 6

Este codigo ejecutara la vista principal que tendra toda la funcionalidad deseada de nuestra aplicacion basica.

Model

Model

Vista Principal “La Vista”

Vista Principal Sencha ExtJS 6

Vista Principal Sencha ExtJS 6

La vista contendra panels, los paneles contendran botones con la funcionalidad:

  • Ingreso a Sistema
  • Registro de usuario en Sistema
  • Salida de Sistema
Paneles Vista Principal Sencha ExtJS 6

Paneles Vista Principal Sencha ExtJS 6

Vista Principal “El controlador”

El controlador tendra las funciones :

  • onLoginButtonClick .- Esta funcion crea nuestra ventana de login y la muestra en pantalla.
  • onRegisterButtonClick .- Esta funcion crea la ventana registro y la muestra en pantalla.
  • onLogoutButtonClick .- Esta funcion oculta el panel logout y muestra el panel de login con sus correspondientes botones.
Controlador Sencha ExtJS 6

Controlador Sencha ExtJS 6

Controlador Sencha ExtJS 6

Controlador Sencha ExtJS 6

 

Escrito por Christian Portilla Pauca
Ver video de Explicacion aqui.

Nota .- Para ver el codigo fuente de esta aplicacion el link esta en las notas del video.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s