extjs4 refs中配置ref，无法获取get方法

Question

今天学习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);
    }
});
app目录下面的controller目录下面的 LoginWindow.js/**
 * @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();
        }
    }

});WebContent下面的app.js/**
 * @author colbert
 * @description 程序从这里开始
 */var currentActiveUser; //活动用户Ext.application({
//全局变量名称
name:'colbert',

appFolder:'app',

controllers:[
             'LoginWindow'
             ],
             
launch:function(){
var loginWindow = new colbert.view.LoginWindow({
            modal: true
        });
loginWindow.show();
}});WebContent下面的index.html<html>
<head>
    <title>extjs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-neptune.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/kms.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.get('loading-mask').hide();
        });
    </script>
</head>
<body>
<div id=loading-mask>
    <img class="loading" src="resources/images/animations/loading.gif" alt="loading..."/>
</div>
</body>
</html>
项目结构：
运行效果如下:上图只是一个undefined
我测试了一下
usernameField
passworldField
promptLabel都是undefined
请问我这是哪里写错了？求指点。
extjs4 mvc

Answer 1

{ref:'usernameField' , selector:'#loginForm textField[name=username]'},
{ref:'passwordField' , selector:'#loginForm textFiled[name=password]'},这个看上去有点怪，你确定你的标签名（tagName）是 textField ?
在浏览器源代码中显示的是这样？<textField></textField>?

Answer 2

selector:'#loginForm'
这不是一个有别名的组件

Answer 3

 var promptLabel = this.getPromptLabel();
但是我这句this.getPromptLabel()就能使用，我着实不理解这是什么原因

Answer 4

defaults: {
                xtype: 'textfield',{ref:'usernameField' , selector:'#loginForm textField[name=username]'},===>
{ref:'usernameField' , selector:'#loginForm textfield[name=username]'},

Answer 5

你好，我按照你说的改了，能正确了，但出现了一点小问题
{ref:'passwordField' , selector:'#loginForm textfiled[name=password]'}
这段代码， 我通过getPasswordField() 却还是显示未定义，同样的写法，getUsernameField()可以，但getPasswordField()却不可以，请问这是什么原因？我也改过passwordField和password的单词拼写，发现也不是单词写错了，您能再给看看么？