Attivatore ExtJS Controller su collegamento ipertestuale fare clic su

Question

Ho cercato di farlo funzionare per un po 'di tempo, ma non sono ancora riuscito a trovare una soluzione per questo tranne aggiungere un afterrender all'interno degli ascoltatori nella vista. Ma voglio che il controller lo gestisca.

Qualcuno ha un'idea su come posso risolvere questo?

Questo è quello che ho nel mio file al 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

Il modo in cui si sta tentando di fare riferimento al collegamento ipertestuale a vinto' lavoro.

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

Questo cercherà solo i componenti ExtJS, non gli elementi DOM. Molto probabilmente dovrai attaccare il click nel afterrender o qualcosa di simile. Questo non significa che non puoi lasciare i metodi che fanno tutto il lavoro nel controller.

Edit:

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

Answer 2

ho lottato con problema pure. La linea di fondo è che la configurazione di controllo del controller non funziona come gli ascoltatori regolari e agirà solo sugli eventi che vengono attivati ​​dal componente e non da DOM come sottolineato da s_hewitt.

Le alternative sono alquanto brutte con essenzialmente gli ascoltatori sui componenti o sui componenti principali in cui è possibile utilizzare anche i delegati. Una volta che vai su quella strada non è così netto come configurare gli ascoltatori nel controller.

Un altro trucco che ho usato per aggirare questa limitazione è chiamare i metodi del controller dai componenti view Ti piace questa:

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