这可能是一个重复的问题,但无论哪种情况我都想问。我是ExtJS 4的初学者,我正在用Loiane Groner的书Mastering ExtJS 4学习ExtJS。到目前为止,还不错,但是当我使用refs时,应用程序中断了,告诉我自动生成的方法不可用:
这是我的登录控制器代码:
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>'
});
我在ExtJS 4文档中发现refs和array,因此在使用它时不要忘记添加方括号,例如:
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的Mastering ExtJS 4出现代码错误。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句