Javascript ExtJs-奇怪的textfield渲染行为

我正在使用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);
    }
});

现在一切看起来都很好，除了密码字段没有边框这一事实

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

有人有办法解决这个问题吗

我正在使用ExtJS4.0.7

编辑：

我又有了一个有趣的发现。如果我添加第三个文本字段，bug将移动到该文本字段

---

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

问题是由如何创建窗口引起的。请参阅此Sencha论坛帖子：

---

i、 e.您需要使用Ext.create（'DTL.view.windows.LoginWindow'）；不是xtype:“login”

而是在所有浏览器（如Firefox和Chrome？）中都是这样的。我只是在Firefox和IE8中测试了它。相同的行为。看起来添加了一些额外的css类，它覆盖了密码字段。你能在firebug中检查它以检查哪些类被应用吗？我已经找到了问题的根源。出于任何原因，Ext将

x-viewport

样式类添加到最后一个文本字段，该字段将覆盖边框。如果我在Firebug中删除它，一切看起来都很好，但是为什么要应用这个类呢？