PDA

View Full Version : how do I make a table layout's parent grow to hold the table's natural size?



bareflix
18 Oct 2010, 8:25 AM
I'm still missing something about layouts. Sometimes things grow to hold their children at their natural size, but other times children get truncated. Here's an example. I have a form with a fieldset using a table layout. The table layout does exactly what I want, but the parent clips it on the right edge rather than growing to hold the whole child.
Is there a setting for the parent or child to change this?

22894


var keyview = new Ext.form.FieldSet (
{
title: 'sample field set',
layout: 'table',
layoutConfig:
{
columns: 5
},

items:
[
{colspan: 5, xtype: "label", text: 'Long string of text that will wrap if necessary, thats ok and expected'},
{xtype: "button", text: 'Download file'},
{xtype: "button", text: 'Download file2'},
{xtype: "button", text: 'Upload file',},
{xtype: "button", text: 'View file'},
{xtype: "button", text: 'Test file'},
]
});

var panel = new Ext.FormPanel (
{
labelAlign: 'right',
frame:true,
defaultType:'textfield',
monitorValid:true,

items:
[
{
fieldLabel:'field 1',
},
{
fieldLabel:'field 2',
xtype: 'checkbox'
},
keyview
]
});

var win = new Ext.Window(
{
title:'Settings',
closable: false,
resizable: false,
plain: true,
border: false,
items:
[
panel
]
});

win.show();

Animal
18 Oct 2010, 9:45 AM
var keyview = new Ext.form.FieldSet ({
title: 'sample field set',
layout: 'table',
autoWidth: true,
layoutConfig: {
columns: 5
},
items:[
{colspan: 5, xtype: "label", text: 'Long string of text that will wrap if necessary, thats ok and expected'},
{xtype: "button", text: 'Download file'},
{xtype: "button", text: 'Download file2'},
{xtype: "button", text: 'Upload file',},
{xtype: "button", text: 'View file'},
{xtype: "button", text: 'Test file'},
]
});
var panel = new Ext.FormPanel ({
labelAlign: 'right',
frame:true,
defaultType:'textfield',
monitorValid:true,
items:[{
fieldLabel:'field 1',
}, {
fieldLabel:'field 2',
xtype: 'checkbox'
}, keyview]
});
new Ext.Window({
title:'Settings',
border: false,
items: panel
}).show();