单击超链接时触发ExtJS控制器

我已经尝试让它工作了很长一段时间了，但是除了在视图中的侦听器中添加afterrender之外，我仍然没有找到解决方案。但我想让控制器来处理

有人知道我如何解决这个问题吗

这就是我目前档案中的内容

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'
        }
    ]
});

Ext.define（'HD.view.core.Navigation'{
扩展：“Ext.panel.panel”
，名称：'导航'
，别名：“widget.navigation”
，布局：“手风琴”
，地区：'西部'
，宽：200
，标题：“导航”
，可折叠：正确
，项目：[
{
标题：“标题1”
，html:“表1”
},
{
标题：“标题2”
，html:‘第二’
}
]
});

您尝试引用超链接

a

的方式无效

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

这将只查找ExtJS组件，而不是DOM元素。您很可能需要在afterrender或类似的地方附加“单击”。这并不意味着您不能将完成所有工作的方法留在控制器中

编辑：

---

我也在为这个问题挣扎。底线是控制器控件配置不像常规侦听器那样工作，它只对组件而不是DOM触发的事件起作用，正如s_hewitt指出的那样

在组件或父组件上使用监听器，您也可以使用委托，这些替代方案有点难看。一旦你走了这条路，它就不像在控制器中设置侦听器那样简单了

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

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

---

感谢s_hewitt的回复。当我下班回家的时候，我会尝试把它变成一个有用的东西：）我一直在努力解决这个问题。如果我将视图的afterrender中的注释替换为警报，则会正确触发该注释。但我正在努力解决的是视图和控制器之间的联系。另外，我不确定我在控制器中的“newTab”部分是否做对了。这是我当前的代码：将

afterrender

侦听器移动到控制器。看我的编辑。太好了！工作起来像个符咒：）你介意解释一下为什么这个.control不起作用，但当它成为一个变量时，它就起作用了吗？不管怎样，它都会起作用。但需要将其设置为变量，以便您可以从

单击

函数中访问它-在单击函数中使用

此

将引用表示“tab1”的Ext对象。感谢您的输入DmitryB。但通过稍微修改s_hewitt的答案，我的应用程序现在只在其控制器控制的所有视图上运行，但我会注意到这一点，以防我需要这样做：）

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

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