autogenerated getter is undefined - ExtJS 4

Question

This may be a duplicate question but in either case I wanted to ask. I am a beginner ExtJS 4 developer and I am learning ExtJS using Loiane Groner's book, Mastering ExtJS 4. So far so good, but when I got to use refs the app breaks telling me that the autogenerated method is unavailable:

Here is my Login controller code:

Ext.define('Packt.controller.Login', {
    extend: 'Ext.app.Controller',
    requires:[
        'Packt.util.MD5'
    ],
    views:[
        'Login',
        'authentication.CapsLockTooltip'
    ],

    refs: {
        ref: 'capslocktooltip',
        selector: 'capslocktooltip',
        autoCreate : true
    },
    init: function(){
        this.control({
            "login form button#submit":{
                click: this.onButtonClickSubmit
            },
            "login form button#cancel": {
                click: this.onButtonClickCancel
            },
            "login form textfield": {
                specialkey:this.onTextfieldSpecialKey
            },
            "login form textfield[name=password]": {
                keypress: this.onTextfieldKeyPress
            }
        });
    },

    onTextfieldKeyPress: function(field, e, options){
        var charCode = e.getCharCode();

        if((e.shiftKey && charCode >= 97 && charCode <= 122)  ||
            (!e.shifKey && charCode >= 65 && charCode <= 90)){
                if(this.getCapsLockTooltip() ===  undefined) {
                    Ext.widget('capslocktooltip');
                }
            } else {
                if(this.getCapsLockTooltip() !==  undefined) {
                    this.getCapsLockTooltip().hide();
                }
            }
    },

    onTextfieldSpecialKey: function(field, e, options){
        if(e.getKey() == e.ENTER){
            var submitBtn = field.up('form').down('button#submit');
            submitBtn.fireEvent('click', submitBtn, e, options);
        }
    },

    onButtonClickSubmit: function(button, e, options){
        console.log('login submit');
        var formPanel = button.up('form'), 
        login = button.up('login'),
        user = formPanel.down('textfield[name=user]').getValue(),
        pass = formPanel.down('textfield[name=password]').getValue();

        if (formPanel.getForm().isValid()){
            Ext.get(login.getEl()).mask("Authenticating... Please wait...", 'loading');
            pass = Packt.util.MD5.encode(pass);

            Ext.Ajax.request({
                url:'php/login.php',
                params:{
                    user:user,
                    password:pass
                },
                success: function(conn, response, options, eOpts){
                    Ext.get(login.getEl()).unmask();
                    var result = Ext.JSON.decode(conn.responseText, true);

                    if(!result){
                        result = {};
                        result.success = false;
                        result.msg = conn.responseText;
                    }

                    if(result.success){
                        login.close();
                        Ext.create('Packt.view.MyViewport');
                    } else {
                        Ext.Msg.show({
                            title:'Fail!',
                            msg: result.msg,
                            icon:Ext.Msg.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                },
                failure: function(conn, response, options, eOpts){
                    Ext.get(login.getEl()).unmask();
                    Ext.Msg.show({
                        title: 'Error!',
                        msg: conn.responseText,
                        icon: Ext.Msg.ERROR,
                        button: Ext.Msg.OK
                    });
                }
            });
        }
    },

    onButtonClickCancel: function(button, e, options){
        console.log('login cancel');
        button.up('form').getForm().reset();
    }
});

In firebug is see this:

TypeError: this.getCapsLockTooltip is not a function

I also was checking the Ext object inside Firebug and the closest thing to my function was this:

Ext.app.Application.instance.getController('Login').getAuthenticationCapsLockTooltipView();

But i didn't find the required function. What do I do wrong? I follow the book and the above code is what you get.

Here is the caps lock view:

Ext.define('Packt.view.authentication.CapsLockTooltip', {
    extend: 'Ext.tip.QuickTip',
    alias: 'widget.capslocktooltip',

    target: 'password',
    anchor: 'top',
    anchorOffset: 60,
    width: 300,
    dismissDelay: 0,
    autoHide: false,
    title: '<div class="capslock">Caps Lock is On</div>',
    html:'<div>Having caps log on may cause you the enter password incorrectly.</div>'
});

Answer 1

I found in the ExtJS 4 docs that refs is and array so when using it don't forget to add square brackets lik this:

refs:[
    {
        ref: 'capsLockTooltip',
        selector: 'capslocktooltip'
    }
]

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.app.Controller-cfg-refs

So now when you search JS memory with

Ext.app.Application.getController('Login').getCapsLockTooltip();

getCapsLockTooltip() function will exist. Also selector would be the alias name of the components you are trying to access.

Also just to note, Mastering ExtJS 4 by Loiane Groner has code errors.