javascript - 为什么 extjs 按钮处理程序不起作用

Question

单击“取消”后，我有一个包含一些按钮的窗口没有任何反应。我真的很困惑我哪里出错了:

Ext.define('Myapp.view.User.NewForm', {
    extend: 'Ext.window.Window',
    width: 610,
    height: 380,
    y: 50,
    resizable: false,
    closable: true,
    draggable: false,
    title: 'new user',

    items: [{
        buttons: [{
                text: 'save',
                iconCls: 'form-save'
            },{
                text: 'cancel',
                iconCls: 'form-cancel',
                scope: this,
                handler: this.cancel     
            }]
    }],
    cancel: function() { alert('cancel'); }

})

Answer 1

正如 Lolo 所说，this.cancel 在您定义 Form 类时是未定义的。

这个问题的标准解决方案是在 initComponent 中创建 items 数组:

Ext.define('Myapp.view.User.NewForm', {
    ...

    initComponent: function() {
        this.items = [{
            buttons: [{
                text: 'save',
                iconCls: 'form-save'
            },{
                text: 'cancel',
                iconCls: 'form-cancel',
                scope: this,
                handler: this.cancel     
            }]
        }];

        this.callParent();
    },

    cancel: function() { alert('cancel'); }

});

当 initComponent 被调用时，this 就像人们期望的那样指向您的表单实例。在您的代码中，this 指向不包含取消函数的全局 window 对象。