如何在 EXTJS MVC 的控制器上添加按钮单击事件答案

【问题标题】：How to Add a Button Click event on Controller of EXTJS MVC如何在 EXTJS MVC 的控制器上添加按钮单击事件
【发布时间】：2013-06-27 18:41:36
【问题描述】：

我正在尝试使用 Ext JS 开发应用程序。到目前为止，我已经开发了一个带有边界布局的视口，并且完成了北部区域和南部区域。在中心区域，我有多个面板，例如 1. 用于搜索数据。 2. 输入数据任务列表（表格），在下一个面板上我显示了网格。在该面板之后，我有一个 Button，它应该侦听单击事件以向用户显示表单。

对于那个事件处理，我的控制器看起来像这样：

    this.control({
       'viewport button [action=add]':{
    click: this. addData},
addData : function(button){
consol.log('the add button was clicked');
}
    .......

现在，如果我单击显示该按钮的页面中的按钮，它不会响应任何内容以下是我的视口结构代码：

launch : function() {
    Ext.create('Ext.container.Viewport', {
        layout : 'border',
        autoScroll : true,
        items : [{
            region: 'north',
            .......
        },{
            region: 'west',
            ..............
        },{
            region: 'center',
            items:[{
                xtype: 'panel',
                ..............
            },{
                xtype: 'panel',
                ............
            },{
                xtype: 'userlist' 
            },{
                xtype: 'button',
                 text: 'Add',
                 action: 'add'
            }]
        }]

任何帮助都将受到高度赞赏

【问题讨论】：

标签： javascript extjs

【解决方案1】：

删除选择器中button 和[action=add] 之间的空格：

this.control({
   'viewport button[action=add]': {
        click: this. addData
    },
    ...

【讨论】：

谢谢。是一个很大的帮助。而且我还需要编写控制器来显示用户信息输入表单，而不是注销控制台消息。到目前为止，我已经在我的视图中定义了一个 SearchForm 并给出了一个别名作为 searchform。我的猜测是我会将该 searchForm 传递给 addData 但运气不好所以，我想知道我该怎么做。如果您仍然可以提供帮助，我们将不胜感激。
您是否在问如何从addData() 函数中获取对表单的引用？您可以使用 Ext.ComponentQuery 使用相同的基于选择器的方法，例如 button.up('panel').down('searchform')。它们具有很大的灵活性，特别是如果您将itemId 添加到您的组件并执行button.up('#myParentPanel') 等。查看文档：docs.sencha.com/extjs/4.2.1/#!/api/Ext.ComponentQuery