PDA

View Full Version : Form looks OK in SA but not in browser



tomdchi
26 Aug 2012, 3:04 PM
I have built a login form in SA that looks fine but in Firefox its messed up. Can anyone spot the problem?

Screenshot of form in SA:
38259

Screenshot of form in Firefox:
38260

Code:


Ext.define('Login.view.LoginWindow', {
extend: 'Ext.window.Window',
alias: 'widget.loginwindow',

height: 125,
width: 500,
layout: {
align: 'stretch',
type: 'hbox'
},
closable: false,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
flex: 3,
border: false,
height: 120,
style: 'background-image:url("logo.png");background-position:center;background-repeat:no-repeat;background-color:white;',
width: 400,
layout: {
align: 'stretch',
type: 'hbox'
}
},
{
xtype: 'form',
flex: 4,
border: false,
itemId: 'loginForm',
bodyPadding: 10,
method: 'POST',
url: 'login/login',
items: [
{
xtype: 'textfield',
anchor: '100%',
itemId: 'username',
name: 'username',
fieldLabel: 'User Name',
allowBlank: false,
enableKeyEvents: true
},
{
xtype: 'textfield',
anchor: '100%',
itemId: 'password',
inputType: 'password',
name: 'password',
fieldLabel: 'Password',
allowBlank: false,
blankText: 'Password Required',
enableKeyEvents: true
},
{
xtype: 'container',
height: 40,
style: 'margin-top:15px;',
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 1,
margins: '0 10 0 5',
height: 22,
itemId: 'loginBtn',
width: 75,
text: 'Login'
},
{
xtype: 'button',
flex: 1,
margins: '0 5 0 10',
height: 22,
itemId: 'resetBtn',
width: 75,
text: 'Reset'
}
]
}
]
}
]
});

me.callParent(arguments);
}

});

aconran
27 Aug 2012, 9:34 AM
Firebug is your friend, check out the underlying styles/box model/etc and see wahts going on.

It looks like if you set a title to your window it may fix things.

tomdchi
28 Aug 2012, 1:24 PM
Did something change in 4.1? I was able to fix it by using the config option "header: false".

I had thought that this was set by default if the title was not defined.