View Full Version : Table Layout inside a Tab

11 Nov 2009, 12:21 PM
I'm not quite sure how to get the layout working for my Tabs especially with the table layout. I have several different fields with different lengths, but every time I try to add some structure to it using the table layout it doesn't seem to render rightly.

I can't just use column lay out cause some rows will have three fields in it and some just one. Need a little advice on this one.

basically this is how my code looks like.

xtype: 'tabpanel',
plain: true,
activeTab: 0,
height: 335,
defaults: {
bodyStyle: 'padding:10px'
items: [{
title: 'Additional Contact Details',
layout: 'form',
defaults: {
width: 230
defaultType: 'textfield',
items: [{
fieldLabel: 'Phone',
name: 'acd_phone'
}, {
title: 'Personal Details',
layout: 'form',
autoScroll: true,
items: [{
layout: 'table',
layoutConfig: {
columns: 3
defaults: {frame:true,layout: 'form'},
items: [{
colspan: 3,
xtype: 'textarea',
fieldLabel: 'Home Address',
name: 'pd_address',
height: 30,

but here's what it looks like:


1. I can't seem to get the first table pan to be as long as the tab is, it doesn't seem to follow the colspan code I add.

2. the fieldLabel should be aligned with the field rather than on top of it

Any advice would be appreciated :)


11 Nov 2009, 1:32 PM
the fieldLabel should be aligned with the field rather than on top of it

try giving
labelAlign : "left"

11 Nov 2009, 11:04 PM
Thanks the labelAlign worked for the label now my only problem is the first, to get the table match the width of the tab, also it doesn't seem like the colspan is working..