Come eseguire l'ereditarietà del controller in ExtJS 4?

Question

Sto cercando di scrivere un'applicazione abbastanza complessa che implicherebbe diversi elementi "di base" (un modulo di base, una griglia di base, ecc.) Da cui altri elementi erediterebbero per seguire DRY. Questi elementi di base avrebbero eventi comuni a cui tutti gli elementi ereditari sarebbero stati attivati. Dato che questo è il caso, ho bisogno di un qualche tipo di controller di base che ascolterà per questi eventi.

Qual è il modo di base per configurare un controller da ereditare/estendere facilmente?

Answer 1

Questo è esattamente ciò che stiamo facendo nel nostro progetto. Qui ci sono campioni di coppia per combo griglia/regolatore:

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); 

    }, 
}); 

Spero che questi esempi di coppia aiutino. Le idee di base sono i seguenti:

• Hai messo il più codice possibile in controlli di base e la base controllori
• Si utilizza refs funzioni (getGrid() ecc) nel controller di base
• non dimenticate di creare questi riferimenti in tutti i controller figlio
• Collegare diversi eventi chiave ai gestori del controller di base nei controller figlio.