Question

我想在textfield上为change事件添加一个事件监听器。我创建了一个包含表单面板的视图 - 到目前为止一切正常。

现在我尝试将一个事件监听器添加到其中一个文本字段中：

          items:[
                {
                    xtype    :"textfield",
                    name     :"field",
                    label    :"field",
                    required :true,
                    listeners:{
                        change:{
                            fn    : "onChangeHandler",
                            scope: this
                        },
                    }
            },

但它确实没有用......没有任何反应。没有错误，没有函数调用。我究竟做错了什么？

编辑：

尝试了另一件事 - 直接在项目定义中：

                    {
                    xtype    :"textfield",
                    name     :"field",
                    label    :"field",
                    required :true,
                    listeners:{
                        change:{
                            fn    :this.onChange
                        },
                        scope :this
                    }
                },

但是在改变时我在控制台上遇到了这个错误：

Uncaught TypeError: Cannot call method 'apply' of undefined

Answer 1

尝试更改此内容：

listeners:{
                        change:{
                            fn    : "onChangeHandler",
                            scope: this
                        },
                    }

到此：

listeners:{
                        change: this.onChangeHandler
                    }

<强>更新最简单的方法是为app.view.Login设置一个id（比如'abc'），然后：

fn: function() {Ext.getCmp('abc').onEvent();},

Answer 2

我认为'this'存在某种范围问题。在控制器中处理事件可能会更好。在您的用户名textfield（id：'username'）中添加一个ID，然后尝试使用我的控制器。我得到了keyup和tap事件的回调;在更改回调之后我遇到了一些错误，但它确实触发了。此外，您的密钥更新了事件名称。 Sencha列出了每个对象的所有events，我觉得这很有帮助。

enter image description here

的LoginController

Ext.define("App.controller.LoginController", {
    extend: "Ext.app.Controller",

    config: {
        refs: {
            username: '#username'
        },
        control: {
            username: {
                keyup: 'onUsernameKeyUp',
                change: 'onUsernameChange'
            }
        }
    },
    onUsernameKeyUp: function() {
        console.log("onUsernameKeyUp");
    },
    onUsernameChange: function() {
        console.log("onUsernameChange");
    },
    launch: function () {
        this.callParent();
        console.log("launch");
    },
    init: function () {
        this.callParent();
        console.log("init");
    }
});

app.js - 添加了控制器：[]

Ext.application({
    name:'App',

    controllers: ['LoginController'],
    phoneStartupScreen :'resources/loading/Homescreen.jpg',
    tabletStartupScreen:'resources/loading/Homescreen~ipad.jpg',

    launch:function () {
        var loginform = Ext.create("App.view.Login");

        Ext.Viewport.add([loginform]);
    },
});

Answer 3

您必须将“范围”放入“更改”区块。

listeners:{
  change:{
    fn    :this.onChange,
    scope :this
  }
}

您有错误Uncaught TypeError: Cannot call method 'apply' of undefined 因为你写过：

listeners:{
  change:{
    fn    :this.onChange
    },
    scope :this
}

你看到了区别吗？：）

同时检查你是否将“监听器”放入“config”块并在“config”块之后运行“onChange”。

Sencha Touch 2 - 文本字段的“更改”事件监听器

3 个答案: