ExtJs-奇怪的文本字段渲染行为

Question

我使用以下代码使用ExtJs构建登录窗口：

Ext.define('DTL.view.windows.LoginWindow', {
    extend : 'Ext.window.Window',
    alias : 'widget.login',
    id : 'loginWindow',

    autoShow : true,
    width : 400,
    height : 180,
    layout : 'border',
    border : false,
    modal : true,
    closable : false,
    resizable : false,
    draggable : false,

    initComponent : function () {
        this.items = [{
                region : 'north',
                height : 52,
                bodyCls : 'app_header'
            }, {
                id : 'login_form',
                region : 'center',
                xtype : 'form',
                bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
                labelWidth : 75,
                defaultType : 'textfield',
                items : [{
                        fieldLabel : 'Username',
                        name : 'username',
                        id : 'usr',
                        allowBlank : false
                    }, {
                        fieldLabel : 'Password',
                        name : 'password',
                        inputType : 'password',
                        id : 'pwd',
                        allowBlank : false
                    }
                ]
            }
        ];

        this.buttons = [{
                id : 'login_button',
                text : 'Login',
                disabled : true
            }
        ];

        this.callParent(arguments);
    }
});

现在，一切看起来都很好，但密码字段没有边框。

我尝试了各种代码修改，但没有任何帮助。

有谁有办法解决这个问题？

我正在使用ExtJs 4.0.7

编辑：

我发现了另一个有趣的发现。 如果我添加了第三个文本字段，则错误将移至该文本字段。

显然，它总是影响最后一个文本字段。

Answer 1

问题是由您如何创建窗口引起的。 看到这个Sencha论坛帖子：

文字框边框问题

也就是说，您需要使用Ext.create（'DTL.view.windows.LoginWindow'）; 而不是xtype：'login'