Row Layout in Forms

[Brendan Carroll]

Greetings,

I'm wondering how to get form input elemnts to fill horizontally. I think I understand columns but want my checkboxes to fill the width of the column not stack vertically. Any thoughts?



var form = new Ext.form.Form({
labelAlign: 'left',
labelWidth: 5
});

form.column({autoCreate: {tag: 'div', cls: 'x-form-ct x-form-column', style: 'width: 100%;'}});
form.fieldset({legend:'Search For'},
new Ext.form.Radio({
boxLabel: 'Contract',
name: 'searchType',
labelSeparator: '',
inputValue: '422d'
}),

new Ext.form.Radio({
boxLabel: 'BMP',
name: 'searchType',
labelSeparator: '',
inputValue: '422d'
}),

new Ext.form.Radio({
boxLabel: 'Inspection',
name: 'searchType',
labelSeparator: '',
inputValue: '422d'
}),

new Ext.form.Radio({
boxLabel: 'SWM Facility',
name: 'searchType',
labelSeparator: '',
inputValue: '422d'
}),

new Ext.form.Radio({
boxLabel: 'Structure',
name: 'searchType',
labelSeparator: '',
inputValue: '422d'
})
);

form.end();

form.addButton('Save');
form.addButton('Cancel');

form.render('form-ct4');

Thx.

[violinista]

Try this:


var frmTest=new Ext.Form({/*form config*/});
var radio1=new Ext.Form.Radio({/*radio button config*/});
var radio2=new Ext.Form.Radio({/*radio button config*/});
var radio3=new Ext.Form.Radio({/*radio button config*/});
frmTest.column({width:35, hideLabels:true}, radio1);
frmTest.end();
frmTest.column({width:35, hideLabels:true}, radio2);
frmTest.end();
frmTest.column({width:35, hideLabels:true}, radio3);
frmTest.end();


This is working for me, and it's a general solution for horizontal form field layout.

[mdissel]

This is working for me, and it's a general solution for horizontal form field layout.

There's another simple solution, add tabIndex to your fields to set the order of fields.

Thanks

Marco

[Brendan Carroll]

Can u explain a little more about the tabIndex approach? Not sure how it adresses my problem. I'll try the other suggestion for sure but it seems to me that approach might present further problems when creating a row below all those arbitrary columns ...not to mention the impact on rendering speeds. Am i totally off-base? i'll give it a shot, Thx.

[mdissel]

For a single row the tabindex wont help you, but when you have multiple rows with columns and want a "horizontal form field layout", you can set tabIndex so that the user can use tab to move horizontal through the fields.

Thanks
Marco