PDA

View Full Version : Please help - Window size problem



happybrowndog
9 Oct 2010, 12:36 PM
It seems no matter what I do with layouts or setting width/height of the window, it is always the same size. What's funny as well is that the sizes are different in IE and FF.

This is my code:
*******************************
loginwindow = new Ext.Window({
id:'theloginwindow',
renderTo:Ext.getBody(),
layout:'absolute',
width: 240,
height: 100,
maximizable:false,
resizable: false,
title: 'Login',
plain: true,
style: 'background-color:#cccccc;color:#000000',
bodyStyle : 'padding: 5px',
items: [{
xtype:'form',
x:2,
y:2,
border:false,
bodyStyle : 'padding: 5px',
labelWidth:65,
height:80,
width:220,
items: [
{ xtype: 'textfield', fieldLabel: 'Username',name:'loginusername', id: 'loginusername' , allowBlank:false},
{ xtype: 'textfield', fieldLabel: 'Password',name:'loginpassword', id: 'loginpassword' , allowBlank:false}
],
buttons:[]
}
],
buttons: [{
text:'Submit',
handler: function() { doLogin(); }
},
{
text: 'Close',
handler: function(){
loginwindow.destroy();

}

}]
});

loginwindow.show();
***************************************

No matter what my window width/height settings, the window is 380x170 in FF and 240x180 in IE.

I have tried the layout for Window as "fit", "form", "auto" and as well what you see there ("absolute"), but in all cases the window remains the exact same size. I need it to be shrunken down to the size of the form. When I set the layout to "form", the window remains the exact same size and the form is resized to the size of the window, leaving all this unattractive blank space under the password field. Please note that I don't use x and y positions for the form element when I don't use "absolute" layout for the window (ie: I'm not that dumb).

The buttons I would like to keep as part of the window, not as part of the form.

Please see the images. This should be easy, but it's been busting my head open for hours now!

FireFox:22763
IE: 22764

Animal
9 Oct 2010, 2:03 PM
Layouts are used by a Container to size child items.

Condor
11 Oct 2010, 2:06 AM
It does exactly what you are asking it to.

I assume you want:
1. layout:'fit' on the window and no x,y,width or height on the form (maybe a bodyStyle:'padding: 2px' to get the x:2,y:2 effect).
2. anchor:'100%' on the text fields.