PDA

View Full Version : form component layout issues



coooolmagic
10 Nov 2010, 9:43 AM
Hi All

here is my form panel. I just want a simple thing that all control i need in 1 line nicely.
I have taken this code from examples and I think I am missing something.

When this renders, the button displays in next line and radio button also renders far from each other.
please help me in understanding how layout works...

var chartTabPanel = new Ext.FormPanel({
labelAlign: 'top',
title: 'Location Wise Employees',
bodyStyle:'padding:5px',
width: 1200,

items: [{
layout:'column',
border:false,
items:[
{
columnWidth:.2,
layout: 'form',
border:false,
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
anchor:'55%',
format: 'd-m-Y',
endDateField: 'enddt' // id of the end date field
}]
},{
columnWidth:.2,
layout: 'form',
border:false,
defaultType: 'datefield',
items: [{
fieldLabel: 'End Date',
name: 'enddt',
id: 'enddt',
anchor:'55%',
vtype: 'daterange',
format: 'd-m-Y',
startDateField: 'startdt' // id of the start date field
}]
},{
columnWidth:.2,
layout: 'form',
border:false,
items: [
new Ext.form.RadioGroup({
vertical: false,
id:"report_selection",
items: [
{boxLabel: 'Daily', name: 'chart_freq', inputValue: 'employee_chart', checked:true},
{boxLabel: 'Weekly', name: 'chart_freq', inputValue: 'managers_chart'}
]
}),
{
name: 'aaa',
id: 'enaaaddt',
xtype: 'button',
text: 'Generate Statistics', // id of the start date field
handler: function(f){
alert("hello");
}
}]
}
]
}]
});

coooolmagic
11 Nov 2010, 2:52 AM
Hi experts, please have a look if you have time.