administrar dinámicamente Ext.app.Application.controllers

Question

Por el momento, nuestro equipo evalúa la posibilidad de convertir grandes aplicaciones web corporativas (un tipo de sistema ERP, más de 600 pantallas únicas) utilizando ExtJS para el front-end. La aplicación fue construido en nuestro código abierto eludia motor

Nuestro motor requiere una definición de modelo (que se transforma la base de datos a medida que edita la definición), tienen algún tipo de controlador (Los módulos de contenido) y Presentación (módulos de presentación con código que genera js reales + mezcla html)

al igual que algunas personas de this nuestro hilo del equipo tiene un problema:

Nos gustaría tener modelo y la vista en el lado del servidor y sólo para enviar JSON-datos al front-end

Actualmente e desarrolladores Ludia básicos (= mi equipo, mantenemos tanto esta solicitud y eludia) han hecho algunos pasos hacia morphing motor para usar ExtJS como extremo frontal

Mi equipo está considerando:

• continúan usando viejos módulos de contenido, del lado del servidor de código
• archivos de generación del modelo para ExtJS sobre la marcha utilizando el lado del servidor definición de modelo,
• conversión de módulos de presentación para el lado del cliente módulos vista ExtJS, y escribir controladores del lado del cliente para cada pantalla pero ahora hay uno más problema: ExtJS requiere enumerar todos controladores en Ext.app.Application Cada vez que una persona escribe nueva/Convierte una pantalla de viejo motor que debe añadir a esta lista

Puede Ext.app.Application.controllers ... pueden generar de forma dinámica?

Por lo tanto estas preguntas, ordenadas por falta de claridad:

• Puedes nombrar alguna lo suficientemente grandes (más de 600 pantallas, de código abierto preferible) la aplicación MVC/no MVC que utiliza ExtJS como front-end?
• ¿Nos estamos moviendo de la manera correcta?

ACTUALIZACIÓN

que debería tratar a la pregunta estrecha

Uno no tiene que cargar todos los controladores a la vez durante el inicio de aplicaciones?

Lo que trato de decir, tal vez es posible cargar los controladores en un enfoque más 'dinámico':

• generar uno js controlador de pantalla abierta
• añadir otras nuevas a Ext.app.Application .controllers cada vez que el usuario hace algo (hace clic en un enlace, botón, etc.): cuando se necesita nueva pantalla

Answer 1

Aunque no sé si esto va a funcionar (no tratado), lo que se vería en IS el método Ext.app.Application.getController().Del api reference:

Devuelve la instancia de un controlador con el nombre dado. Cuando el controlador aún no existe, se crea.

De manera teórica, puede llamar a getController() con su controlador definido dinámicamente y lo creará.

nota al margen que aprendí mientras mira a la Ext 4. Los controladores no puede disparar eventos, así que lo que tiene que hacer para comunicarse entre controladores es para desencadenar eventos en el objeto Application, se describe en this post

Answer 2

I hizo el mismo tipo de pregunta aquí: http://www.sencha.com/forum/showthread.php?151220-Adding-controllers-views-dynamically-in-Ext-MVC-pattern

Parece que esto no es compatible con la Ext 4. actual Desde entonces he cambiado de dirección y no estoy usando la arquitectura MVC que proporciona Ext, y en su lugar estoy usando la misma técnicas que utilicé en Ext 3, que es agregar/cargar componentes adicionales en ciertos controladores (clics de botones o enlaces, desplazamientos, búsquedas, etc.) .

En mi aplicación, todos mis componentes son extensiones personalizadas de clases base Ext, y realmente acabo actuando como un controlador, con las superclases como vista. Por ejemplo, si tengo una extensión de Ext.panel.Panel, además de la configuración inicial de items y layout, no estoy haciendo nada que afecte a la vista (eso se trata en la clase base). La mayor parte de la clase está asociando manejadores y otras cosas al panel para proporcionar un comportamiento específico de la aplicación, que es básicamente la definición de un controlador. No es perfecto, pero es mejor que la alternativa actual, en mi opinión.

Si quiere ejemplos de lo que estoy hablando, o tiene preguntas sobre mi implementación específica, hágamelo saber y estaremos encantados de ayudarle.

Answer 3

La mejor forma de utilizar el controlador bajo demanda es cargarlos dinámicamente y crear instancias de controladores cuando sea necesario. También es necesario poner los controladores en los archivos js separado, por lo que el esquema será el siguiente:

//let's say you need to use controller User: 
var controller = ControllerManager.get('User');//I believe you have some controller manager, similar to Sencha's Ext.ControllerManager 
if(controller){ 
//use it here 
} 
else { 
    loadScript([url of your controller script], controllerLoaded); 
} 
... 
function controllerLoaded(){ 
//create controller instance here if needed and use it then 
} 
... 
function loadScript(url, callback){ 

    var script = document.createElement("script") 
    script.type = "text/javascript"; 

    if (script.readyState){ //IE 
     script.onreadystatechange = function(){ 
      if (script.readyState == "loaded" || 
        script.readyState == "complete"){ 
       script.onreadystatechange = null; 
       callback(); 
      } 
     }; 
    } else { //Others 
     script.onload = function(){ 
      callback(); 
     }; 
    } 

    script.src = url; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 

ACTUALIZACIÓN Con el fin de integrar el nuevo controlador en ya se está ejecutando Ext.app.Application necesita extender Ext.app.Application y agregue el siguiente método:

addController: function(name){ 
    //at this point your controller .js file should be already loaded into the DOM 
    var c = this.getController(name); //controller will be created automatically by name in this getter 
    //perform the same initialization steps as it would have during normal ExtJs process 
    c.init(this); 
    с.onLaunch(this); 
} 

Por cierto, en lugar de utilizar método personalizado para cargar archivo javascript dinámicamente puede utilizar el método de orden interna ExtJs Ext.Loader:

/** 
     * Load a script file, supports both asynchronous and synchronous approaches 
     * 
     * @param {String} url 
     * @param {Function} onLoad 
     * @param {Object} scope 
     * @param {Boolean} synchronous 
     * @private 
     */ 
     loadScriptFile: function(url, onLoad, onError, scope, synchronous) 

Answer 4

Acabamos de pasar esto con nuestra aplicación web. ~ 250 pantallas. Sí, cargamos nuestros controladores dinámicamente.

El tiempo para construir una pantalla con Ext.JS es aproximadamente 400% más rápido que con YUI, que era nuestra plataforma anterior. Lo bueno fue que pudimos mantener el objeto YUI Connect que funciona con mejor eficiencia que la versión Ext.JS.

Tenemos una clase de aplicación que gestiona la carga y la inicialización de los controladores Ext.JS. Aquí, usamos la única otra clase YUI en nuestro código que es YUI.get (YUI.get.script). Solo asegúrate de no cargar un controlador dos veces en la misma sesión.

Supongo que desea cargar dinámicamente estos controladores para el tiempo de carga (que es con lo que tuvimos problemas inicialmente). AMPLIAR, EXTENDER, EXTENDER.

Ext.define('namespace.classname', { 
{ 
    extend: 'Ext.form.panel', 
    // your code here 
} 

Esto disminuirá la descarga general del código y acelerará la inicialización.

Answer 5

Su mejor apuesta es depender de Ext.Loader, pero No uso loadScriptFile() método como se sugirió anteriormente.

Ext 4 introduce un sistema de clases. Uno de los (muchos) beneficios de eso es dep-tree que le permite administrar todas sus dependencias entre componentes y cargar clases según sea necesario.

Aquí es cómo inicializar cargador

Ext.Loader.setPath('App','/js/app'); 
Ext.Loader.setPath('WidgetsLibrary','/js/widgets'); 
Ext.Loader.setConfig({enabled: true}); 

Define una clase controlador de carga dinámica:

Ext.define('App.controller.Menu', { 
    extend: 'Ext.app.Controller',  // leave it as it is 
    models: ['Event','User'],   // this assumes App.model.* prefix 
    stores: ['Options','Permissions'], // this assumes App.store.* prefix 
    views: ['menu.Bar','SmartButton'],// this assumes App.view.* prefix 
    requires: [ 
     'App.whatever.other.class', // auto-load this class as a dependency 
     'WidgetsLibrary.*',   // auto-load all classes in WidgetsLibrary 
    ], 

    init: function(){} 

// [...] 

ahora a dynamically-load su clase controlador (una maqueta):

Ext.require(     
    'App.controller.Menu',  // this auto-loads all dependencies 
    function(){ 
     // ... as soon as this class 
     // and all its dependencies have loaded... 
     var controller = Ext.create('App.controller.Menu'); // create an instance 
     controller.init();         // launch init() method 
    } 
); 

BONIFICACIÓN: usando el sistema de clases y el cargador, no tiene que mantener su propia colección de controladores y verificar si el controlador se ha cargado o no. Simplemente use Ext.ClassManager.isCreated()method described here.

if(Ext.ClassManager.isCreated('App.controller.Menu')){ 
    // ... controller has already been loaded and init ... 
}else{ 
    // we need to auto-load that controller using Ext.require() 
} 

---

Más lectura:

• http://docs.sencha.com/ext-js/4-0/#!/guide/class_system
• http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture