Uso de más de un controlador con ExtJS 4 MVC

controller extjs4

Question

Digamos que tengo un controlador principal, luego mi aplicación tiene un controlador para cada "módulo". Este controlador principal contiene la ventana gráfica, luego un encabezado (con un menú) + un contenedor "centrado", que está vacío al principio.

Un clic en el menú cambiará el módulo / controlador actual y la vista adhoc (que pertenece a este controlador) se mostrará en el contenedor centrado.

Creo que es un escenario muy simple, pero extrañamente no encontré la manera correcta de hacerlo. ¿Algunas ideas? ¡Muchas gracias!

Answer 1

En el controlador principal, agregue el controlador secundario en el controlador de evento click del menú

Ext.define(''MyAPP.controller.MainController'',{
...
  init:function()
  {
    this.control({
     ''menulink'':
     {
        click:this.populateCenterPanel
     }
    });
  },
  populateCenterPanel:function()
  {
    this.getController(''ChildController'');
  }
});

En la función de inicio, agregue listener to controller add event como este -

Ext.application({
...
  launch:function(){
    this.controllers.addListener(''add'',this.newControllerAdded,this);
  },

  newControllerAdded:function(idx, ctrlr, token){
    ctrlr.init();
  }
});

Ahora coloque el código para incrustación dinámica de vistas en la ventana gráfica en el método init de ChildController.

Ext.define(''MyAPP.controller.ChildController'',{
...
  refs: [
    {ref:''displayPanel'',selector:''panel[itemId=EmbedHere]''}
  ]
  init:function(){
    var panel=this.getDisplayPanel();
    panel.removeAll();
    panel.add({
      xtype:''mycustomview'',
      flex:1,
      autoHeight:true,
      ...
    });
  }
});

HTH :)

Answer 2

Esto es lo que hago: tengo una barra de herramientas en la parte superior, una navegación a la izquierda y la ubicación del centro es el área de trabajo (básicamente un panel de pestañas) como usted mencionó. Vamos a tomar cada parte de la aplicación y explicar. Primero, así es como se ve mi ventana gráfica:

Ext.define(''App.view.Viewport'',{
    extend: ''Ext.container.Viewport'', 
    layout: ''border'',
    requires: [
        ''App.view.menu.NavigationPane'',
        ''App.view.CenterPane'',          
        ''App.view.menu.Toolbar''
    ], 
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                region: ''north'',
                xtype: ''panel'',                 
                height: 24,                                     
                tbar: Ext.create(''App.view.menu.Toolbar'')                                       
            },{
                title: ''Navigation Pane'',
                region: ''west'',
                width: 200,
                layout: ''fit'',
                collapsible: true, 
                collapsed: true,
                items: Ext.create(''App.view.menu.NavigationPane'')                                       
            },{
                region: ''center'',                                               
                xtype: ''centerpane''                                     
            }]       
         });

        this.callParent(arguments);
     }
});

Puede ver que tengo una barra de herramientas (App.view.menu.Toolbar) con menú y navegación a la izquierda (App.view.menu.NavigationPane). Estos dos componentes constituyen mi menú principal o puerta de enlace a otros módulos. Los usuarios seleccionan el elemento del menú y las vistas apropiadas del módulo (como formulario, cuadrícula, tablas, etc.) se cargan en el ''panel central''. El panel central no es más que una clase derivada de Ext.tab.Panel.

Como dijo, tengo un controlador principal que maneja todas las solicitudes desde la barra de herramientas y el panel de navegación. Manejó solo la barra de herramientas y las acciones de clic del panel de navegación. Aquí está mi AppController:

Ext.define(''CRM.controller.AppController'',{
    extend: ''Ext.app.Controller'',    
    init: function() {

        this.control({   

            ''apptoolbar button[action="actionA"]'' : {
                     click : function(butt,evt) {
                             this.application.getController(''Controller1'').displayList();
                     }
             },  
             .
             .  // Add all your toolbar actions & navigation pane''s actions...
             .           
             ''apptoolbar button[action="actionB"]'' : {
                     click : function(butt,evt) {
                            this.application.getController(''Controller2'').NewRequest(); 
                     }
             }
        });     
     } 
 });

Mira uno de los controladores de mi botón. Obtengo el controlador a través de la propiedad ''aplicación'':

this.application.getController(''Controller2'').NewRequest(); 

Con la ayuda del método getController, obtengo la instancia del controlador y luego llamo a cualquier método dentro de mi controlador. Ahora echemos un vistazo al esqueleto del controlador de mi módulo:

Ext.define(''CRM.controller.Controller2'',{
    extend: ''Ext.app.Controller'',    
    refs: [         
        {ref:''cp'',selector: ''centerpane''}, // reference to the center pane
        // other references for the controller
    ],
    views: [''c2.CreateForm'',''c2.EditForm'',''c2.SearchForm'',''c2.SearchForm''],
    init: function() {

        this.control({   

            ''newform button[action="save"]'' : {
                // Do save action for new item
            },  
            ''editform button[action="save"]'' : {
                // update the record...
            },  
            ''c2gridx click'' : {
                // oh! an item was click in grid view
             }
        });     
    },
    NewRequest: function() {
        var view = Ext.widget(''newform'');
        var cp = this.getCp();      // Get hold of the center pane... 
        cp.add(view);   
        cp.setActiveTab(view);
    },
    displayList: function() {
        // Create grid view and display...
    }   
 });

El controlador de mi módulo solo tiene las acciones relacionadas con ese módulo (la cuadrícula de un módulo, formularios, etc.). Esto debería ayudarlo a comenzar a rodar en la dirección correcta.