Button tap in sencha Controller file is not working

Question

Main view file

Ext.define('DemoApp1.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',

    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Email',
        'Ext.field.Password',
        'Ext.field.DatePicker',
        'Ext.TitleBar',
        'Ext.Button'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                xtype: 'container',
                title: 'Login',
                autoDestroy: false,
                layout: {
                    type: 'vbox',
                    pack: 'center',
                    align: 'center'
                },
                iconCls: 'user',
                items: [
                    // login user
                    {
                        xtype: 'fieldset',
                        id: 'login-user-field-set',
                        width: 500,
                        title: 'Login Here!',
                        items: [
                            {
                                xtype: 'emailfield',
                                label: 'Email',
                                name: 'user'
                            },
                            {
                                xtype: 'passwordfield',
                                label: 'Password',
                                name: 'password'
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        id: 'login-button',
                        text: 'Login',
                        ui: 'confirm',
                        width: 150
                    }
                ]
            },
            {
                autoDestroy: false,
                xtype: 'container',
                title: 'Register',
                layout: 'vbox',
                scrollable: true,
                iconCls: 'add',
                items: [
                    {
                        xtype: 'titlebar',
                        title: 'Register New User',
                        docked: 'top'
                    },
                    {
                        // register new user
                        xtype: 'fieldset',
                        id: 'reg-items-field-set',
                        items: [
                            {
                                xtype: 'textfield',
                                label: 'Email',
                                allowBlank: false,
                                name: 'reg_user'
                            },
                            {
                                xtype: 'passwordfield',
                                label: 'Password',
                                name: 'reg_password'
                            },
                            {
                                xtype: 'passwordfield',
                                label: 'Confirm Password',
                                name: 'reg_cpassword'
                            },
                            {
                                xtype: 'textfield',
                                label: 'User Name',
                                name: 'reg_user_name'
                            },
                            {
                                xtype: 'datepickerfield',
                                picker: {
                                    yearFrom: 1975,
                                    yearTo: 2005
                                },
                                label: 'DOB',
                                name: 'reg_dob'
                            },
                            {
                                xtype: 'selectfield',
                                label: 'Gender',
                                name: 'reg_gender',
                                options: [
                                    {text: 'Male', value: 'male'},
                                    {text: 'Female', value: 'female'}
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: {
                            type: 'hbox',
                            align: 'center',
                            pack: 'center'
                        },
                        items: [
                            {
                                xtype: 'button',
                                id: 'register-button',
                                text: 'Register',
                                ui: 'confirm',
                                width: 200
                            },
                            {
                                xtype: 'spacer',
                                width: 50
                            },
                            {
                                xtype: 'button',
                                id: 'reset-button',
                                text: 'Reset',
                                ui: 'decline',
                                width: 200
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

Controller file

Ext.define('DemoApp1.controller.MainController', {
    extend: 'Ext.app.Controller',
    requires: [
        'Ext.form.FieldSet',
        'Ext.Button'
    ],

    config: {
        refs: {
            loginButton: '#login-button',
            regFieldSet: '#reg-items-field-set',
            regNewUserButton: '#register-button',
            regFormResetButton: '#reset-button',
            loginUserFieldSet: '#login-user-field-set'
        },
        control: {
            loginButton: {
                tap: 'loginButtonTapped'
            },
            regFormResetButton: {
                tap: 'regFormResetButtonTapped'
            },
            regNewUserButton: {
                tap: 'regNewUserButtonTapped'
            }
        },
        loginButtonTapped: function(self, e) {
            console.log('loginButtonTapped');
        },
        regFormResetButtonTapped: function(self, e) {
            console.log('regFormResetButtonTapped');
        },
        regNewUserButtonTapped: function(self, e) {
            console.log('regNewUserButtonTapped');
        }
    }
});

on click on any button it logging the below

Uncaught TypeError: Cannot read property 'apply' of undefined 

what wrong in it???

thanks in advance...

Answer 1

Your methods should not go in the config block. loginButtonTapped, regFormResetButtonTapped and regNewUserButtonTapped. They should come out one level into the class definition, because they are class methods, not configurations.