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

时间:2011-12-12 15:32:53

标签: javascript extjs

我正在使用以下代码构建一个包含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

编辑:

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

显然它会影响最后一个文本域。

1 个答案:

答案 0 :(得分:1)

问题是由您创建窗口的方式引起的。看到这个Sencha论坛帖子:

Textfield Border Problem

即。你需要使用Ext.create('DTL.view.windows.LoginWindow');而不是xtype:'login'