¿Cómo se realiza la herencia del controlador en ExtJS 4?

Question

Estoy tratando de escribir una aplicación bastante compleja que implicaría tener varios elementos "base" (una forma base, una grilla de base, etc.) que otros elementos heredarían para seguir DRY. Estos elementos base tendrían eventos comunes que dispararían todos los elementos heredados. Como este es el caso, necesitaré algún tipo de controlador base que escuche estos eventos de elementos.

¿Cuál es la forma básica de configurar un controlador para que se pueda heredar/extender fácilmente?

Answer 1

Esto es exactamente lo que estamos haciendo en nuestro proyecto. Aquí son muestras de los pares por un combo rejilla/controlador:

BaseGrid:

Ext.define('BaseGrid', { 
    extend: 'Ext.grid.Panel', 

    initComponent: function() { 
    var me = this; 
    // create common stuff 

    me.on('itemcontextmenu', me.showContextMenu, me); 
    me.callParent(arguments); 
    }, 

    showContextMenu: function(view, rec, node, index, e) { 
    var me = this; 

    if (me.contextMenu === undefined) 
     return; 

    e.stopEvent(); 
    me.contextMenu.showAt(e.getXY()); 
    } 

}); 

BaseController:

Ext.define('BaseController', { 
    extend: 'Ext.app.Controller', 

    init: function() { 
     // put some common stuff 


     this.callParent(arguments); 
    }, 

    gridRendered: function() { 
    // common function to do after grid rendered 
     var me = this, 
      grid = me.getGrid(); // note that base controller doesn't have ref for Grid but we still using it !! 

     gr.contextMenu = me.createContextMenu(); 
    }, 

    createContextMenu: function() { 
     return ... // create context menu common for all grids with common handlers 
    }, 

}); 

ChildGrid:

Ext.define('ChildGrid', { 
    extend: 'BaseGrid', 
    alias: 'widget.child' 
... 

}); 

ChildController:

Ext.define('ChildController', { 
    extend: 'BaseController', 

    refs: [ 
    { ref: 'grid', selector: 'child gridpanel' } // now basecontroller will have something when called getGrid()!! 
    ], 

    init: function() { 
    var me = this; 
    me.control({ 
     'child gridpanel': { 
      afterrender: me.gridRendered, // subscribing to the event - but using method defined in BaseController 
      scope: me 
     } 
    }); 

    me.callParent(arguments); 

    }, 
}); 

Espero que estas muestras de pareja ayuden. Las ideas básicas son las siguientes:

• Pones tanto código como sea posible en controles de la base y la base controladores
• a usar funciones refs (getGrid(), etc.) en los controladores de base
• No se olvide cree estos refs en todos los controladores secundarios
• Vincule varios eventos clave a los controladores del controlador base en los controladores secundarios.