ExtJS Déclencheur du contrôleur sur le lien hypertexte cliquez sur

Question

Cela fait longtemps que j'essaye de faire fonctionner cela mais je n'ai toujours pas trouvé de solution pour cela, sauf ajouter un after -ender dans les écouteurs de la vue. Mais je veux que le contrôleur le gère.

Quelqu'un at-il une idée sur la façon dont je peux résoudre ce problème?

C'est ce que j'ai dans mes dossiers au moment 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'); 
    } 
}); 

vue/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 façon dont vous essayez de référencer l'hyperlien a won » t travail.

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

Cela ne recherchera que les composants ExtJS, pas les éléments DOM. Vous devrez probablement attacher le clic dans l'AfterRender ou quelque part semblable. Cela ne signifie pas que vous ne pouvez pas laisser les méthodes qui font tout le travail dans le contrôleur.

Edit:

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

Answer 2

J'ai lutté avec problème aussi bien. La ligne de fond est la configuration de contrôle de contrôleur ne fonctionne pas comme les auditeurs réguliers et agira seulement sur les événements qui sont déclenchés par le composant et pas par DOM comme s_hewitt a souligné.

Les alternatives sont plutôt laides avec essentiellement des écouteurs sur les composants ou les composants parents où vous pouvez également utiliser des délégués. Une fois que vous suivez cette route, ce n'est pas aussi simple que de configurer les écouteurs dans le contrôleur.

Une autre astuce que je l'habitude de contourner cette limitation appelle les méthodes de commande des composants de vue comme celui-ci:

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