Trying to stretch component in table layout - extjs

Question

I have a 3x2 panel of components that looks like this :
It uses table layout (I am guessing this is the best layout for the job). However when I widen the window the inner components do not stretch :
My code looks like this :
v = Ext.create('Ext.window.Window', {
renderTo: document.body,
layout: {
type: 'table',
columns: 3,
tdAttrs: { style: 'padding: 3px;' }
},
items: [
{
xtype: 'label',
text: 'Field 1'
},
{
xtype: 'label',
text: 'Field 2'
},
{
xtype: 'label',
text: 'Field 3'
},
{
xtype: 'textfield'
},
{
xtype: 'textfield'
},
{
xtype: 'combobox'
}
]
}
);
v.show()
As you can see I am using the table layout. It seems to place the components like bricks, without any stretching rules. Is there a better layout for this situations? I was thinking of maybe hBox with three panels, and then inside the panels you would have vBox. But that seems a bit cumbersome.
fiddle is here :
http://jsfiddle.net/dxyxudds/2/

Answer 1

You can use column layout with columnWidth for each item. textfield has a label, so no need for separate label widgets.
Ext.create('Ext.window.Window', {
renderTo: document.body,
height: 100,
width: 500,
autoShow: true,
shadow: false,
layout: 'column',
defaults: {
labelAlign: 'top',
xtype: 'textfield',
columnWidth: 0.33,
padding: 5
},
items: [{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}]
});
Here is a solution with table layout, but it requires wrapping each field with a form layout container. Form layouts primary purpose is to make fields stretch to container width.
Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
height: 170,
width: 400,
autoShow: true,
layout: {
type: 'table',
columns: 3,
tdAttrs: {
style: 'width: 33%'
}
},
defaults: {
xtype: 'container',
layout: 'form',
padding: 5,
defaults: {
xtype: 'textfield',
labelAlign: 'top'
}
},
items: [{
items: {
fieldLabel: 'Field 1'
}
}, {
items: {
fieldLabel: 'Field 2'
}
}, {
items: {
xtype: 'combobox',
fieldLabel: 'Field 3'
}
}, {
items: {
fieldLabel: 'Field 4'
}
}, {
items: {
fieldLabel: 'Field 5'
}
}, {
items: {
xtype: 'combobox',
fieldLabel: 'Field 6'
}
}]
});