PDA

View Full Version : Add padding to FormPanel



mjhaston
30 Nov 2010, 12:42 PM
http://dev.extjs.com/deploy/dev/examples/form/dynamic.html


Trying to add a little padding between the top half of this example and the tabpanel.

devtig
30 Nov 2010, 1:30 PM
var myForm = new Ext.form.FormPanel ({
title: 'My Form',
width: 400,
height: 250,
padding: '50 10 10 10',
//read numbers clockwise: top right bottom left
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
});

The API doc: http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.FormPanel

mjhaston
1 Dec 2010, 6:25 AM
Thank you. That worked placing padding on the last column at the top. I pad the bottom and got my white space between the top of the form and the tabpanel.

I have a related question. Can I config my tabpanel so that it will take up as much space as possible in my viewport center panel? I'm playing around with hard-coding a height, but I'd really like it to "fit" the page. This is basically the same as the example link above.

devtig
1 Dec 2010, 7:17 AM
Make your centerpanel a vbox. Here's the fish:

{
xtype: 'viewport',
layout: 'border',
items: [
{
xtype: 'panel',
title: 'My Panel',
region: 'center',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'form',
title: 'My Form',
flex: 1,
height: 300,
padding: '50 10 10 10',
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
},
{
xtype: 'tabpanel',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100
}
]
}

Here's your rod:
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
http://dev.sencha.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout

mjhaston
1 Dec 2010, 7:27 AM
Thanks again. I'll have to check through the "rod" links because my centerpanel is already a "card". I think that changes things a bit. when I switched to "vbox" it displayed all of my items in the centerpanel.

Thank you very much for the help.

devtig
1 Dec 2010, 7:32 AM
{
xtype: 'viewport',
layout: 'border',
items: [
{
xtype: 'tabpanel',
title: 'My Panel',
region: 'center',
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'Tab 1',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'form',
title: 'My Form',
flex: 1,
padding: '50 10 10 10',
height: 300,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
},
{
xtype: 'tabpanel',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100
}
]
}