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一样，在定义Form类时，this.cancel未定义。

此问题的标准解决方案是在items内创建initComponent数组：

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对象。

Answer 2

您也可以这样定义窗口按钮

...
initComponent: function(){
this.buttons =  [
            {   text:'Close',
                handler: function(){
                    this.up('window').close(); //<--Notice "this" refers to the button
                }
            },
            {
                text: 'Save',
                action: 'save',
                handler: this.save,
                scope: this
            }
        ]; //eo buttons
        this.callParent(arguments);
    }, //eo initComponent
    save: function(){ ... }
...

Answer 3

那是因为this.cancel未定义。看到这段代码：

var that = this;
Ext.define('Myapp.view.User.NewForm', {

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

这传递给范围指向与该变量相同的对象。您必须找到其他方式来获取对父控件的引用。您可以尝试：handler: function(){ this.ownerCt.ownerCt.cancel.apply(this, arguments); }，然后移除scope: this行。

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

3 个答案: