PDA

View Full Version : layout hbox problem



tomim
9 Sep 2009, 6:13 AM
Hi people,

I have tried to create window with formpanel and multiple containers in formpanel
haivng hbox layout but window is not properly sized.

The same I have tried with Ext Designer Previw where everything is ok.
Image and code example are in attachments....

I'm stuck...can someone help please???



var x = new Ext.Window({ xtype : 'window',
layout : 'fit',
autoHeight : true,
minHeight : 300,
minWidth : 300,
items : [
{xtype :'form',
layout : 'fit',
autoHeight : true,

items : [
{xtype : 'container',
layout : 'hbox',
autoHeight : true,
padding : 2,
items : [
{xtype : 'combo' , flex :1, margins : 1 },
{xtype : 'combo' , flex :1 ,margins : 1},
{xtype : 'field' , width : 300 , margins : 1 },
{xtype : 'combo' , flex :1 , margins : 1}
]
}
]
}
]
});

x.show();

24 Sep 2009, 9:23 AM
Here's a good start:



var row1 = {
xtype : 'container',
layout : 'hbox',
defaultType : 'textfield',
defaults : {
flex : 1
},
items : [
{ name : 'field1' },
{ name : 'field2' }
]
};

var row2 = {
xtype : 'container',
layout : 'hbox',
defaultType : 'textfield',
defaults : {
flex : 1
},
items : [
{ name : 'field3' },
{ name : 'field4'}
]
};

new Ext.Window({
width : 400,
height : 100,
layout : 'fit',
items : {
xtype : 'form',
border : false,
layout : 'anchor',
defaults : {
anchor : '100%',
style : 'margin-top: 3px; margin-right: 5px;'
},
items : [
row1, row2
]
}
}).show()

tomim
25 Sep 2009, 10:50 AM
That's it !!! :) Thank you very much. You helped me a lot.
Playing with your example I got something like this below but now every component have the same size. I have tried couple of settings but no help. Also I couldn't make padding to work for inside elements.



var row1 = {xtype : 'container',
layout : 'hbox',
autoHeight : true,
defaults : {
flex : 1
},
items : [
{xtype : 'combo'},
{xtype : 'combo'},
{xtype : 'field' , width : 300 },
{xtype : 'combo' },
{xtype : 'button', text : 'AND'}
]
};



var x = new Ext.Window({ xtype : 'window',
layout : 'fit',
minWidth : 400,
width : 400,
autoHeight : true,
items : [
{xtype :'form',
layout : 'anchor',
baseCls: 'x-plain',
defaults : {
anchor : '99%',
border : false,
style : 'margin: 2px;'
},
items : [row1, row1,row1 ]
}
]
});

x.show();