Estructura de un proyecto de Sencha ExtJS 6 creado con Sencha CMD

Estructura de proyecto

Estructura de proyecto

La estructura de un proyecto de Sencha ExtJS, es una estructura base para poder codificar todo tipo de proyectos, y en si nos da la posibilidad de usar ambos toolkits como son el toolkit classic o el toolkit modern, o simplemente escoger cual usar. Ademas generandonos toda la estructura de proyecto ya no debemos preocuparnos por como configurar todo un proyecto de Sencha ExtJS pues ya esta configurado para funcionar y comenzar a codificar de una buena vez sin mas preocupaciones.

Ver Video Explicativo

Ver Video Explicativo

 Paso a Paso Configuracion de Inicio de Aplicacion Web Sencha ExtJS 6

Archivos Base de proyecto ExtJS 6

Archivos Base de proyecto ExtJS 6

Para configurar nuestro proyecto Sencha ExtJs 6 tenemos varios archivos a considerar como son los archivos de la base del directorio del proyecto de Sencha ExtJS 6, revisemoslos:

app.json .- es un archivo que tiene las bases e informacion de formacion y construccion del proyecto por tanto nos sera muy util para trabajar con nuestro proyecto Sencha ExtJS 6. Ahi se puede encontrar la configuracion en general con detalles precisos y puntuales del proyecto como son nombre de proyecto, configuraciones de toolkit, configuraciones de temas a usar en el proyecto, paths, configuracion de punto de inicio de aplicacion tanto como otros detalles que solo se deben modificar si sabemos bien lo que cada cambio en este archivo puede significar para el proyecto.

bootstrap.css .- indica el path o direccion de donde se usaran los css del aplicativo.

bootstrap.js .- indica detalles del inicio de aplicacion, de preferencia no debe modificarse este archivo.

build.xml .- es un archivo base para la construccion del proyecto por medio de la herramienta ant.

classic.json .- son configuraciones propias del toolkit classic.

modern.json .- son configuraciones a aplicarse en la base del toolkit modern.

workspace.json .- son configuraciones a aplicarse al espacio de trabajo actual del proyecto.

Codificando proyecto Sencha ExtJS 6

Codificando en Sencha ExtJs 6

Codificando en Sencha ExtJs 6

Las aplicaciones de codigo en Sencha ExtJs 6 normalmente solo se trabajaban en el directorio app, en Sencha Extjs 6 hubo un cambio debido a la fusion de los frameworks EtxJS y Touch en una sola rama de codificacion, con caracteristicas compartidas tanto como con caracteristicas no compartidas.

Ahora en la version 6 de sencha podemos ver que debemos hacer uso de tres carpetas o directorios  de codigo  para nuestra aplicacion puesto que ahora si deseamos armar un proyecto con capacidades moviles tanto como desktop para web tendremos que usar los directorios “app” , “classic” , y “modern” esto significa tener tres codigos base de aplicacion quizas complique conceptualmente el modo de uso y codificacion, pero nos permite tener codigo mucho mas adaptado a las necesidades de la programacion actual, de este modo cuando deseemos  usar las capacidades compartidas por todo el codigo de aplicacion de Sencha ExtJS 6 usamos la carpeta app para codificar luego si deseamos usar caracteristicas propias del toolkit classic (base de codigo extjs) desarrollamos en el directorio classic, y por ultimo si deseamos usar el toolkit modern (base de codigo touch) trabajamos el codigo en el directorio modern.

Otro detalle importante es que podemos trabajar codigo basado en los patrones MVC o MVVM en los directorios de trabajo de Sencha ExtJS 6 sin problema por tanto nuestras subcarpetas de trabajo seran las mismas que en la version 5, como puede ser app/controller  para controladores, app/view para vistas, app/model para modelos, app/store para stores de datos. Solo en los casos de los toolkits y sus carpetas de trabajo para codigo se usara la subcarpeta src y dentro colocaremos las carpetas como por ejm para vistas en el toolkit classic seria asi classic/src/view , solo en los casos particulares de implementaciones particulares para los toolkits que usemos tendremos que hacer variaciones en los codigos para mantener el codigo acorde con la base de codigo de cada toolkit que usemos en sencha ExtJS 6.

Carpetas de proyecto Sencha ExtJS 6

Las carpetas que se generan por medio de Sencha CMD nos ayudan a trabajar de un modo mas optimo agilizando nuestro trabajo y liberandonos de la configuracion del proyecto.

app .- este es directorio donde tendremos el codigo compartido de la aplicacion.

classic .- en este directorio se ha de trabajar el codigo para el toolkit classic.

modern .- en este directorio se trabaja el codigo dirigido al toolkit modern.

build .- es el directorio donde la herramienta Sencha CMD contruye nuestro codigo destino dirigido a deployment de nuestra aplicacion frontend de Sencha ExtJS 6.

ext .- es el directorio donde esta la base de codigo del framework.

overrides .- es el directorio donde se coloca sobrecarga de componentes creados por nosotros mismos o componentes de terceros a usarse en nuestro proyecto.

packages .- es el directorio donde debemos colocar los paquetes a usarse en el proyecto.

resources .- es el directorio destinado a recursos a usarse en la aplicacion web.

sass .- son los archivos comunes del proyecto para la generacion de nuestros css de proyecto, destinados a modificar los estilos y visualizacion de nuestras interfaces del proyecto.

 

Autor: Christian Portilla Pauca

Link del Video

 

 

 

 

 

Anuncios

6 comentarios en “Estructura de un proyecto de Sencha ExtJS 6 creado con Sencha CMD

  1. Hola, trabajo con codeigniter y extjs 4, quiero actualizarme y me he trabado en el tema que cuando creas una app con sencha cmd te genera como lo explicas aquí una estructura propia de ellos, el tema esta en configurar el extjs 6 para cambiar el basepath, he leido en varias partes que pudiera hacerse en app.json pero no encuentro la forma.

    Una app codeigniter tiene la estructura
    –application
    —-……
    —-controllers
    —-models
    —-views
    –system

    yo normalmente la app de extjs la pongo en una carpeta a la par de application y system llamada app o web, pero no logro que al llamar una vista de codeigniter me cargue la app generada por el sencha cmd

    Tienes alguna idea de que se puede cambiar en los ficheros de configuracion de la app generada por el sencha cmd…

    • En primera instancia yo recomiendo poner codeigniter bajo la estructura de extjs para que sea mas simple de usar sin cambiar nada, pero en el caso que tu deseas que extjs sea un subproyecto de codeigniter tendras que hacer algunos cambios mas o menos drasticos por ejm en app.js ahi debes cambiar la ruta hacia la nueva ruta que tengas de acuerdo al sistema de rutas de codeigniter entonces … bajo esa premisa ahi debes aumentar una configuracion llamada path donde indicas desde donde deseas llamar al proyecto generado por sencha cmd, eso permitiria que puedas llamar con la vista de codeigniter a los fuentes compilados por el proyecto de sencha extjs 6. Entonces despues de eso debes copiar en la vista que debe mostrar la app de sencha extjs todo el codigo de index.html del codigo autocompilado del proyecto que lo encontraras en la carpeta build/production/nombre_de_proyecto no olvides que las rutas deben tambien ser modificadas para que apunten a los archivos correctos en su ubicacion correcta.
      En si, si corriges todo y haces que todos los archivos sean leidos correctamente todo debe funcionar perfectamente…

      atte

      christian

  2. Hola Christian, Estoy haciendo una migracion de EXtjs4.2 a Extjs6, el proyecto de base no fue hecho segun MVC, estoy pensando si lo mejor es reescribirlo en 4.0 sobre la estructura generada por cmd y luego hacer la migracion a 6, en este caso la sintaxis es la misma y no hay elementos nuevos a considerar aprovechando al maximo la migracion automatica, o reescribirlo sobre la applicacion generada dirctamente en 6.0. Tu que opinas? cual ha sido tu experiencia con el migrador automatico?

    Gracias de antemano.

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