ExtJS controller screen for hyperlink

Question

I tried to get this to work for quite some time, but so far I have not been able to find a solution for this other than adding after viewing inside the listeners in the view. But I want the controller to handle it.

Does anyone have an idea on how I can solve this?

This is what I have in my files at the 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'); } }); 

View / 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

The way you try to link to the hyperlink a will not work.

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

This will only look for ExtJS components, not DOM elements. Most likely, you will have to attach a click in the afterrender or somewhere similar. This does not mean that you cannot leave methods that do all the work in the controller.

Edit:

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

Answer 2

I also struggled with the problem. The bottom line is that the configuration of the Control controller does not work like regular listeners, and will only act on events that are triggered by the component, not the DOM, as pointed out by s_hewitt.

Alternatives are somewhat ugly, essentially listeners on components or parent components, where you can also use delegates. When you go along this route, it is not as clean as setting up listeners in the controller.

Another trick I used to get around this limitation is to call controller methods from components of the form as follows:

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