Button handler event not calling function (not firing)

[English]

I have a view defined, which contains a form panel, which contains a button.
I have set the "handler" to a function within the class, but it just does not fire.
If I put an inline function into the "handler" declaration, then it works.

I'd sure appreciate some advice!

Ext.define("lmsmobile.view.Login", {    extend: 'Ext.form.Panel',
    alias: 'widget.LoginForm',
    initialize: function(){
        this.callParent();
        console.log("Initialising the Login view");
    },
    requires: [
        'Ext.Toolbar',
          'Ext.Img',
          'Ext.form.FieldSet',
          'Ext.form.Password',
          'Ext.Button'
    ],
    config: {
         url: 'CheckLogin.php',
        baseCls: 'MainPanel',
        items: [
            {
                xtype: 'image',
                src: 'resources/images/logo.png',
                width: 492,
                height: 90
            },
            {
                xtype: 'fieldset',
                title: 'User Login',
                instructions: 'Please enter your username and password.',
                items: [
                    {
                        xtype: 'textfield',
                        name: 'txtUserName',
                        label: 'User Name:',
                        placeHolder: 'Enter your User Name',
                        required: true
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'txtPassword',
                        label: 'Password:',
                        placeHolder: 'Enter your password',
                        required: true
                    }
                ]
            },
            {
                xtype: 'button',
                text: 'Login',
                ui: 'action',
                id: 'LoginButton',
                handler: this.onLoginButtonPress,
                scope: this,
            },
            {
                xtype: 'button',
                text: 'Forgot Password'
            },
            {
                xtype: 'button',
                text: 'Contact Support'
            },
            {
                docked: 'bottom',
                xtype: 'toolbar',
                title: 'Testing',
            },
        ]
    },
    onLoginButtonPress: function() {
        console.log("onLoginButtonPress from the view.");
        //this.fireEvent("LoginButtonPressed", this);
    }
});

[haduki]

'this' is window object.

var config={
    test:this,
    buttonConfig:{
        test:this
    }
}
console.info(config.test);
console.info(config.buttonConfig.test);

config:{
    listeners:{
        initialize:function(){

            this.down('#LoginButton').setHandler(this.onLoginButtonPress);
            this.down('#LoginButton').setScope(this);
        }
    }
}

[English]

Thanks. I understand that "this" in that context refers to the window object. However, I have tried all ways, with, or without. That was just defaulted back to the sample code that I was using as an outline.

Whatever I do, the "handler:" does nothing. I was interested in the handler: use, not adding listeners - although I tried that with no success also.

I would appreciate something more specific to the code I posted, if possible.

[haduki]

Ext.define("lmsmobile.view.Login", {    extend: 'Ext.form.Panel',
    alias: 'widget.LoginForm',
    initialize: function(){
        this.callParent();
        console.log("Initialising the Login view");
        /*
          you can write here as well
        this.down('#LoginButton').setHandler(this.onLoginButtonPress);
        this.down('#LoginButton').setScope(this);
        */

    },
    requires: [
        'Ext.Toolbar',
          'Ext.Img',
          'Ext.form.FieldSet',
          'Ext.form.Password',
          'Ext.Button'
    ],
    config: {
         url: 'CheckLogin.php',
        baseCls: 'MainPanel',
        items: [
            {
                xtype: 'image',
                src: 'resources/images/logo.png',
                width: 492,
                height: 90
            },
            {
                xtype: 'fieldset',
                title: 'User Login',
                instructions: 'Please enter your username and password.',
                items: [
                    {
                        xtype: 'textfield',
                        name: 'txtUserName',
                        label: 'User Name:',
                        placeHolder: 'Enter your User Name',
                        required: true
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'txtPassword',
                        label: 'Password:',
                        placeHolder: 'Enter your password',
                        required: true
                    }
                ]
            },
            {
                xtype: 'button',
                text: 'Login',
                ui: 'action',
                id: 'LoginButton'
                //,handler: this.onLoginButtonPress,
                //scope: this,
            },
            {
                xtype: 'button',
                text: 'Forgot Password'
            },
            {
                xtype: 'button',
                text: 'Contact Support'
            },
            {
                docked: 'bottom',
                xtype: 'toolbar',
                title: 'Testing',
            }
        ],
		listeners:{
            initialize:function(){


                this.down('#LoginButton').setHandler(this.onLoginButtonPress);
                this.down('#LoginButton').setScope(this);
            }
        }
    },
    onLoginButtonPress: function() {
        console.log("onLoginButtonPress from the view.");
        //this.fireEvent("LoginButtonPressed", this);
    }
});

[English]

Thanks, Haduki. So, from the fact that you're always using the "listeners", do I understand that I can't use the "handler" configuration at all?

I like the idea of setting the handler, and this is intending to raise an event which will be intercepted by a controller.

[haduki]

You are able to use hanlder configuration if you can pass the scope(not the scope configuration) correctly .
example:

Ext.application({
    launch:function(){
         var view=Ext.getCmp('someViewId');
         var button= Ext.create('Ext.Button',{
                 handler:view.OnButtonTap,
                 scope:view
         });
         view.add(button);
    }
})

Ext.define("lmsmobile.view.Login", {    extend: 'Ext.form.Panel',
    alias: 'widget.LoginForm',
    initialize: function(){//<--not listener
        this.callParent();
        console.log("Initialising the Login view");
        this.insert(2,{
                xtype: 'button',
                text: 'Login',
                ui: 'action',
                id: 'LoginButton'
                ,handler: this.onLoginButtonPress,//<-- here ,'this' is your LoginForm instance ,not 'window'
                scope: this,
            });

        

    },
    config:{
        items:[
            {/*image*/},
            {/*fieldset*/},
             //<--insert login button here
            {/*button forgot password*/},
            ...
       ]
    }
  ...

[mitchellsimoens]

From this config from OP:

            {
                xtype: 'button',
                text: 'Login',
                ui: 'action',
                id: 'LoginButton',
                handler: this.onLoginButtonPress,
                scope: this,
            },

this is of the window so it's not going to be able to find onLoginButtonPress on the lmsmobile.view.Login component.

I would use the control config to listen for the tap event on that button:

config : {
    control : {
        '#LoginButton' : 'onLoginButtonPress'
    }
}