Question

这可能是一个重复的问题但在任何一种情况下我都想问。我是初学ExtJS 4开发人员，我正在学习ExtJS使用Loiane Groner的书，掌握ExtJS 4.到目前为止一切都很好，但是当我使用refs时，应用程序会告诉我自动生成的方法不可用：< / p>

这是我的登录控制器代码：

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

在萤火虫中看到这个：

TypeError: this.getCapsLockTooltip is not a function

我也在检查Firebug中的Ext对象，与我的函数最接近的是：

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

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

以下是大写锁定视图：

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

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

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

Answer 2

我在ExtJS 4文档中发现refs是和数组所以在使用时不要忘记添加方括号，这样：

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

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

现在，当您使用

搜索JS内存时

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

getCapsLockTooltip（）函数将存在。选择器也是您尝试访问的组件的别名。

另外需要注意的是，Loiane Groner掌握ExtJS 4有代码错误。

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

2 个答案: