CODEWITHSUNDEEP
javascriptdom-eventssencha-touch-2
Marc
Marc

Reputation: 171

Sencha Touch 2 - "change" event listener for textfield

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

Upvotes: 1

Views: 12215

Answers (3)

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

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

Upvotes: 2

Dmytro Plekhotkin
Dmytro Plekhotkin

Reputation: 1993

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.

Upvotes: 0

user568866
user568866

Reputation:

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.

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

Upvotes: 2

Related Questions