我一直试图让它工作很长一段时间但是我仍然无法找到解决方案,除了在视图中的监听器中添加一个afterrender。但我希望控制器能够处理它。
有没有人知道如何解决这个问题?
这就是我目前在文件中的内容 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');
}
});
查看/型芯/ 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'
}
]
});
答案 0 :(得分:7)
您尝试引用超链接a
的方式无效。
this.control({
'navigation a[id=tab1]': {
click: this.newTab
}
})
这只会查找ExtJS组件,而不是DOM元素。您很可能必须在afterrender或类似的地方附加点击。这并不意味着您不能将完成所有工作的方法留在控制器中。
编辑:
var controller = this;
controller.control({
'navigation': {
afterrender: function() {
Ext.get('tab1').on('click', function() {
controller.newTab();
});
}
}
})
答案 1 :(得分:2)
我也一直在努力解决问题。底线是Controller控件配置不像常规侦听器那样工作,并且只会对组件触发的事件起作用,而不是像s_hewitt指出的那样由DOM触发。
对于组件或父组件上的基本上侦听器,替代方案有点难看,您也可以使用委托。一旦你走了那条路,它就不像在控制器中设置听众一样干净利落。
我用来解决这个限制的另一个技巧是从视图组件中调用控制器方法,如下所示:
MyApp.app.getController('MyController').myFunction();