PDA

View Full Version : Form Layout Question



netnutmike
13 Dec 2010, 11:06 AM
Hello,

Does anyone have a good example of how to put 2 fields side by side in a form?

For the most part all of my forms work fine with one field per line but I am trying to shrink the form down some for smaller windows and would like to put date and time next to each other on one line, etc.

I tried in the items for the form to put:


{
layout:'column',
border: false,
items:[{
xtype:'textfield',
fieldLabel: 'Hostname/Process',
name: 'Hostname',
allowBlank:false,
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'IP Address',
name: 'IPAddress',
anchor:'95%'
}]
}}

That sort of works but messes with the formatting of the fields. So I am guessing that is not the best way to do it.

Any pointers would be greatly helpful!

Thanks!

Mike

raj_plays
13 Dec 2010, 11:52 AM
Take a look at this code...


var form1 = new Ext.FormPanel({
monitorValid: true,
hideMode: 'offsets',
labelWidth: 60,
labelAlign: 'left',
bodyStyle: 'padding: 15px; align: left',
enableRowHeightSync: true,
width: 500,
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: 0.40,
border: false,
layout: 'form',
items: [{
xtype: 'datefield', id: 'start_date', fieldLabel: 'Between', maxLength: 10, format: 'Y-m-d',
width: 100, value: new Date().add(Date.DAY, -7).clearTime(), allowBlank: false
}]
},
{
columnWidth: 0.40,
border: false,
layout: 'form',
labelWidth: 30,
items: [{
xtype: 'datefield', id: 'end_date', fieldLabel: 'And', maxLength: 10, format: 'Y-m-d',
width: 100, value: new Date().clearTime(), allowBlank: false
}]
},
{
columnWidth: 0.20,
border: false,
defaults: {
style: 'float: right'
},
items: [{
xtype: 'button',
id: 'btnSubmit',
text: 'Proceed',
width: 75,
formBind: true,
listeners: {
'click': {
scope: this,
fn: submit
}
}
}]
}
]
}]
});

httpdotcom
13 Dec 2010, 12:14 PM
Look at Saki's xdatetime component (search forum; link not handy) to manage as a single field (date and time separate, but submitted as a single value) or you can also use a compositefield type to reduce to a single fieldLabel (submitted as two separate fields).

netnutmike
13 Dec 2010, 12:14 PM
That works great except for one thing. I have a border around the column layout even though I said border: false. How can I remove the border?