extjs4 refs中配置ref，无法获取get方法
今天学习extjs4的mvc，出现了点问题
app目录下面的view目录里面的 LoginWindow.js
Ext.define('colbert.view.LoginWindow', {
title: 'colbert登录框',
extend: 'Ext.window.Window',
//alias : 相当于别名一样,可以起多个
alias: 'widget.loginwindow',
height: 230,
width: 300,
layout: 'fit',
closable: false,
items: [
{
xtype: 'form',
id: 'loginForm',
bodyPadding: 13,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
xtype: 'textfield',
labelWidth: 50,
width: 250
},
items: [
{
name: 'username',
enableKeyEvents: true,
labelAlign: 'right',
fieldLabel: '用户名',
allowBlank: false,
emptyText: '请输入用户名',
blankText: '用户名不可为空'
},
{
name: 'password',
enableKeyEvents: true,
labelAlign: 'right',
fieldLabel: '密码',
emptyText: '请输入密码',
blankText: '密码不可为空',
allowBlank: false,
inputType: 'password'
},
{
xtype: 'label',
name: 'prompt',
style: 'color: red',
hidden: true,
width: 'auto'
}
],
buttons: [
{ action: 'doLogin', text: '登录' },
{ action: 'doReset', text: '清除' }
]
}
],
initComponent: function() {
this.callParent(arguments);
}
});
/**
* @author colbert
* @description
*/
Ext.define("colbert.controller.LoginWindow" , {//类名
//继承Ext.app.Controller类 可实现单继承 mixins : 可以实现多继承
extend:'Ext.app.Controller',
/**
* 声明该控制层要用到的view
*/
views:[
'colbert.view.LoginWindow'
],
/**
* uses -- 被引用的类可以在该类之后才加载.
* requires -- 被引用的类必须在该类之前加载.
* requires: 'Ext.util.Cookies'
*/
/**简单来说，就是4.0建议的MVC中controller引用组件的一种方式，
* selector中设置组件，可以用id、classname，
* 但推荐用ComponentQuery（“组件检索”功能，这个也是4.0的新特性）来定位组件。
* ref中设置引用名，引用之后会按照引用名自动为该组件设置一个getter方法，
* 如ref：List，则在controller中就可以通过getList方法获得引用的组件。
* 如果你引用的组件不存在，则getList方法也会生成，不会报错，但是返回的是null值。
* 如果你引用的组件有多个，则返回第一个（具体哪个是第一个没研究），
* 所以要注意尽量用ComponentQuery方法指向唯一的组件。实在不行再用id，
* 不过不是很推荐，因为这个id实在引起了太多的问题。
* 凡是component都可以使用该属性在它的归属容器及归属容器的父节点中注入一个对该属性的引用名称。
* 有了该引用名，和该组件有共同父节点的组件就可以比较方便的引用该组件。
*/
refs:[
{ref:'loginWindow' , selector:'loginwindow'},
{ref:'loginForm' , selector:'#loginForm'},
{ref:'usernameField' , selector:'#loginForm textField[name=username]'},
{ref:'passwordField' , selector:'#loginForm textFiled[name=password]'},
{ref:'promptLabel' , selector:'#loginForm label[name=prompt]'}
],
/**
* 初始化方法
*/
init:function(){
this.control({//这里的this相当于这个控制层
'LoginWindow' : {
show:this.doShow
},
'#loginForm button[action=doLogin]' :{
click:this.doLogin
},
'#loginForm button[action=doReset]':{
click:this.doReset
},
'#loginForm textfield[name=username]': {
keypress: this.onUsernameFieldKeypress
},
'#loginForm textfield[name=password]': {
keypress: this.onPasswordFieldKeypress
}
});
},
/**
* cookie读取用户名和密码，显示在用户名和密码框
*/
doShow:function(){
//nothing to do
},
/**
* 点击登陆按钮 调用的方法
*/
doLogin:function(){
//Ext.Msg.alert('提示', 'doLogin');
var usernameField = this.getUsernameField();
var passwordField = this.getPasswordField();
if (0 == (Ext.String.trim(usernameField.getValue()).length)) {
usernameField.focus(true);
this.showPrompt('请输入用户名!');
return;
}
if (0 == Ext.String.trim(passwordField.getValue()).length) {
passwordField.focus(true);
this.showPrompt('请输入密码!');
return;
}
Ext.Msg.alert('提示', '用户名和密码验证通过');
},
/**
* 点击取消按钮 调用的方法
*/
doReset:function(){
},
/**
* username field key press event handler
* @param el
* @param e
*/
onUsernameFieldKeypress: function(el, e) {
this.hidePrompt();
/* focus password field while enter pressed */
if (Ext.EventObject.ENTER == e.getKey()) {
this.getPasswordField().focus();
}
},
/**
* password field key press event handler
* @param el
* @param e
*/
onPasswordFieldKeypress: function(el, e) {
this.hidePrompt();
/* submit login form while enter pressed */
if (Ext.EventObject.ENTER == e.getKey()) {
this.doLogin();
}
},
showPrompt:function(promptMessage){
var promptLabel = this.getPromptLabel();
promptLabel.setText(promptMessage);
if (!promptLabel.isVisible()) {
promptLabel.show();
}
},
hidePrompt:function(){
//Ext.Msg.alert('提示', 'hidePrompt方法执行');
var promptLabel = this.getPromptLabel();
//Ext.Msg.alert('提示', promptLabel);
if (promptLabel.isVisible()) {
promptLabel.hide();
}
}
});
