ExtJS按钮处理程序无法正常工作

Question

单击后不会调用我的ExtJS按钮的处理程序.现在代码看起来像这样.

Ext.define('EDS.view.selector.Container', {
    extend: 'Ext.form.Panel',
    alias : 'widget.selectorcontainer',

    title: 'Selector_V2',
    renderTo: 'input-div',
    layout: 'fit',
    height: '100%',

    items: [
            {
                xtype: 'tabpanel',
                defaults: {
                    bodyPadding: 10
                },
            }
    ],
    buttons: [
        {
            text: 'Reset',
            handler: function(){
                console.log("Reset");
                this.up('form').getForm().reset();
            }
        },
        {
            text: 'Add to constrain',
            handler: this.addConstrain,
        }
    ],

    /*
     * Logic for button "Add to constrain"
     * 
     * Adds an entry into the constrain list describing a person, cost center or an application
     */
    addConstrain: function(button, event){
        console.log('Add_to_constrain clicked');
    }
});

最初这个'选择器容器'被直接放在我的app.js. 但我把它提取到一个独立的视图中.在提取之前,它完美无缺,但现在它无法正常工作.

顺便说一句,我有两个按钮,第一个"重置"工作正常.所以我想知道与该范围有关的"this.addConstrain"是否有任何问题.

Answer 1

你是对的,这是一个范围问题 - this不是你所定义的类; 它Ext.define是调用函数时的范围(可能window).有几种方法可以解决这个问题.最简单的(在我看来)是改变你的处理程序,使其与你的重置处理程序类似:

{
    text: 'Add to constrain',
    handler: function(btn, e) {
       //'this' is now the button
       this.up('selectorcontainer').addConstrain(btn, e);
    }
}

您还可以将按钮添加为initComponent函数的一部分,而不是将它们定义为Ext.define配置的一部分.

initComponent: function() {
    //'this' is now the selector container
    this.buttons = [{
        text: 'Reset',
        handler: function(){
            console.log("Reset");
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Add to constrain',
        handler: this.addConstrain
    }];

    this.callParent();
}