ExtJs - Strange textfield render behavior

Question

I am building a login window with ExtJs, using the following code :

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);
    }
});

Now everything looks fine, except the fact that the password field has no borders.

I tried various code modifications, but nothing helped.

Does anyone have an idea to fix this?

I am using ExtJs 4.0.7

EDIT :

I made another interesting discovery. If I add a third textfield the bug will move to that one.

Apparently it affects always the last textfield.

Does it look like this in all browsers (IE, Firefox and Chrome?) — JD Smith
Looks like there is some extra css class added which is overriding the password field. Could you inspect it in firebug to check which classes are getting applied? — netemp
I've found the source of the problem. For any reason Ext adds the x-viewport style class to the last textfield, which overrides the border. If I remove it in Firebug everything looks fine, but why is this class applied? — Demnogonis

LisburnLad LisburnLad · Accepted Answer · 2012-02-01T21:29:00

The problem is caused by how you create the window. See this Sencha forum post:

Textfield Border Problem

i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'

ExtJs - Strange textfield render behavior

1 Answers