javascript - 自动生成的 getter 未定义 - ExtJS 4

Question

这可能是一个重复的问题，但无论哪种情况我都想问。 我是一名初学者 ExtJS 4 开发人员，我正在使用 Loiane Groner 的书 Mastering ExtJS 4 来学习 ExtJS。到目前为止一切顺利，但是当我使用 refs 时，应用程序中断，告诉我自动生成的方法不可用:

这是我的登录 Controller 代码:

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

在 firebug 中看到这个:

TypeError: this.getCapsLockTooltip is not a function

我还检查了 Firebug 中的 Ext 对象，与我的函数最接近的是:

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

但我没有找到所需的功能。我做错了什么？ 我按照书本操作，上面的代码就是你得到的。

这是大写锁定 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

引用区分大小写，因此创建的函数是 getCapslocktooltip

使用引用时另请参阅Blessing and Curse of refs文章