Controlador ExtJS desencadenante en hipervínculo

Question

He intentado que esto funcione durante bastante tiempo, pero todavía no he podido encontrar una solución para esto, excepto agregar una afterrender dentro de los oyentes en la vista. Pero quiero que el controlador lo maneje.

¿Alguien tiene una idea sobre cómo puedo solucionar esto?

Esto es lo que tengo en mis archivos en el momento http://pastie.org/2751446

controller/App.js 

    Ext.define('HD.controller.App', { 
    extend: 'Ext.app.Controller' 
    ,views: [ 
     'core.Header', 
     'core.Navigation', 
     'core.Content' 
    ] 
    ,init: function() { 
     this.control({ 
      'navigation a[id=tab1]': { 
       click: this.newTab 
      } 
     }) 
    } 
    ,newTab: function() { 
     console.log('Tab 1 should be loaded now'); 
    } 
}); 

vista/core/Navigation.js

Ext.define('HD.view.core.Navigation', { 
    extend: 'Ext.panel.Panel' 
    ,name: 'navigation' 
    ,alias: 'widget.navigation' 
    ,layout: 'accordion' 
    ,region: 'west' 
    ,width: 200 

    ,title: 'Navigation' 
    ,collapsible: true 

    ,items: [ 
     { 
      title: 'Title 1' 
      ,html: '<a id="tab1" style="cursor:pointer;">Tab 1</a>' 
     }, 
     { 
      title: 'Title 2' 
      ,html: 'Second' 
     } 
    ] 
}); 

Answer 1

La forma en que se intenta hacer referencia el hipervínculo a won' t trabajo.

this.control({ 
    'navigation a[id=tab1]': { 
     click: this.newTab 
    } 
}) 

Eso solo buscará componentes ExtJS, no elementos DOM. Lo más probable es que tenga que adjuntar el clic en afterrender o en algún lugar similar. Esto no significa que no pueda dejar los métodos que hacen todo el trabajo en el controlador.

Editar:

var controller = this; 
controller.control({ 
    'navigation': { 
     afterrender: function() { 
      Ext.get('tab1').on('click', function() { 
       controller.newTab(); 
      }); 
     } 
    } 
}) 

Answer 2

he tenido problemas con la edición también. La conclusión es que la configuración de control del Controlador no funciona como los oyentes normales y solo actuará sobre los eventos que son disparados por el componente y no por DOM como lo señaló s_hewitt.

Las alternativas son algo feas con esencialmente oyentes en los componentes o componentes principales donde también se pueden usar delegados. Una vez que va por esa ruta, no está tan limpio como configurar oyentes en el controlador.

Otro truco que utiliza para obtener alrededor de esta limitación está llamando a los métodos de controlador de los componentes de vista como éste:

MyApp.app.getController('MyController').myFunction();