ExtJS控制器在超链接点击时触发

Question

我已经尝试让它工作很长一段时间了，但除了在视图中的侦听器内部添加后渲染之外，我仍然无法找到解决方案。但我希望控制器能够处理它。

有谁知道我该如何解决这个问题？

这就是我目前的文件中的内容 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

您尝试引用超链接 a 的方式将不起作用。

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

这只会查找 ExtJS 组件，而不是 DOM 元素。您很可能必须在渲染后或类似的地方附加点击。这并不意味着您不能将完成所有工作的方法留在控制器中。

编辑：

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

Answer 2

我也曾在问题上挣扎过。最重要的是，控制器控制配置不像常规侦听器那样工作，并且只会作用于由组件触发的事件，而不是像 s_hewitt 指出的那样由 DOM 触发。

替代方案有点难看，本质上是组件或父组件上的侦听器，您也可以在其中使用委托。一旦你走这条路，它就不像在控制器中设置监听器那么清晰了。

我用来解决此限制的另一个技巧是从视图组件调用控制器方法，如下所示：

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