PDA

View Full Version : Table layout. Something wrong with column sizes



desp
23 Oct 2012, 7:23 AM
Hi there,
i'm placing some Ext.form.Fieldsets in one panel. For testing purposes I used 'Column' layout for main container and everything looked fine and nice (column sizes were defined with %). But now I need add some more fieldsets below, so I need rows and changed layout to 'Table' and everything messed up. Only fixed width: xxx helps, I need dynamic size for column. Why not % here?

James Goddard
23 Oct 2012, 7:28 AM
Personally I rarely uses anything but anchor (for forms), fit, card and box.

In your case I would recommend using box. For examples



panel: layout = vbox
container (row 1): layout = hbox
fieldset1: flex = 2
fieldset2: flex = 1
fieldset3: width = XXX
container (row 2) layout = hbox
fieldset1: width = XXX
fieldset2: flex = 1
fieldset3: width = YYY

desp
23 Oct 2012, 7:56 AM
Thanks for answer, but percentage widths seems not working here also. I just put my latest code here. Some blocks can contain unused props, cause I played with many layouts. My main goal is just get 4 fieldsets in 2 rows (3 on top, bottom fieldset is full width in container, colspan: 3).



Ext.define('AC.view.encoding.Video', {
extend: 'Ext.form.Panel',
alias: 'widget.videoparams',

layout: "vbox",
frame: true,
items: [
{
layout: 'hbox',
items: [
{
xtype: 'fieldset',
title: 'amazing',
flex: 2,
width: '30%',
//columnWidth: 0.3,
layout: 'anchor',
defaults: {
anchor: '95%',
labelAlign: "right",
labelWidth: 300
},

items: [
{
fieldLabel: 'Field 1',
name: 'field1',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 2',
name: 'field2',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 3',
name: 'field3',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 4',
name: 'field4',
xtype: 'numberfield'
}
]
},

{
xtype: 'fieldset',
title: 'amazing',
flex: 1,
width: '30%',
//columnWidth: 0.3,
layout: 'anchor',
defaults: {
anchor: '95%',
labelAlign: "right",
labelWidth: 150
},

items: [
{
fieldLabel: 'Field 1',
name: 'field1',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 2',
name: 'field2',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 3',
name: 'field3',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 4',
name: 'field4',
xtype: 'numberfield'
}
]
},

{
xtype: 'fieldset',
title: 'amazing',
width: 30%,
//columnWidth: 0.3,
layout: 'anchor',
defaults: {
anchor: '95%',
labelAlign: "right",
labelWidth: 150
},

items: [
{
fieldLabel: 'Field 1',
name: 'field1',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 2',
name: 'field2',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 3',
name: 'field3',
xtype: 'numberfield'
},
{
fieldLabel: 'Field 4',
name: 'field4',
xtype: 'numberfield'
}
]
}
]
}
],


initComponent: function() {
var self = this;

this.callParent(arguments);
}
});

James Goddard
23 Oct 2012, 8:04 AM
With box layouts you use the flex parameter which is actually both simpler and more powerful than a percentage.

If you want 3 equally spaced columns you would give them each a flex: 1 for: 1/3, 1/3, 1/3.

Box layouts will use the fixed width or height of items without flex and use the flex values for a ratio of the remaining space.

Lets say, for example you have 1000px;

if you have 3 components of:

width: 100,
flex: 1,
flex: 2

The layout will take the first 100px for the first item, leaving 900px.
The second item will get 300px: total flex = 3, 900 / 3 = 300, 300 * 1 = 300.
The third item will get 600px: total flex = 3, 900 / 3 = 300, 300 * 2 = 600.

Once you get the hang of box model and nesting boxes it really is much easier to use and works a lot better than table/column.

desp
23 Oct 2012, 11:07 PM
Well, or I doing something bad or it is simply not working. In code I paste above I removed all width properties, labelWidth decreased, left only flex: 1 and they are not filling nicely container, here look some evidence :-)

http://i50.tinypic.com/2ih1e2q.png

scottmartin
24 Oct 2012, 6:30 AM
Please have a look at the following:
http://jsfiddle.net/wqXK7/

You may also be interested in our Sencha Architect application for creating layouts.
http://www.sencha.com/products/architect/

Scott.

desp
24 Oct 2012, 7:20 AM
Thanks, Scott,
I actually figured out about 'hbox' and 'vbox', just did not notice align property :-) Additionally, got a little problem here, fieldset's background is white, I want it blue, so I changed xtype to 'container' and voila! Dunno is it good though :-)