I would like to add an event listener for the change event on a textfield. I created a view which contains a form panel - everything works so far.

Now I tried to add a event listener to one of the textfields:

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

But it doesn't really work .. nothing happens. No errors and no function call. What am I doing wrong?

EDIT:

Tried another thing - directly within the item definition:

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

But then on change I got this error on console:

Uncaught TypeError: Cannot call method 'apply' of undefined

I would like to add an event listener for the change event on a textfield. I created a view which contains a form panel - everything works so far.

Now I tried to add a event listener to one of the textfields:

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

But it doesn't really work .. nothing happens. No errors and no function call. What am I doing wrong?

EDIT:

Tried another thing - directly within the item definition:

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

But then on change I got this error on console:

Uncaught TypeError: Cannot call method 'apply' of undefined

• javascript
• dom-events
• sencha-touch-2

3 Answers 3

Try changing this:

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

to this:

listeners:{
                        change: this.onChangeHandler
                    }

Updated: The most simple way is to set an id for your app.view.Login (say 'abc'), then:

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

I think there's some sort of scoping issue with 'this'. You might be better off handling events in a controller. Add an id to your username textfield (id: 'username',)then try using my controller. I get callbacks for the keyup and tap events; I'm getting some sort of error after the change callback but it does fire. Also, you had the event name wrong for keyup. Sencha lists all their events for each object, which I've find quite helpful.

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 - Added controllers: []

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]);
    },
});

You must put "scope" into "change" block.

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

You have error Uncaught TypeError: Cannot call method 'apply' of undefined because you've written:

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

Do you see the difference? :)

Also check that you put listener into "config" block and function "onChange" after "config" block.