Table form layout

[mlarese]

using only css i found a way to have multiple fields in the same row
(kind of tablelayout with formlayout advantages)

.x-form-item {float:left;width:270px;padding:2px} to have fixed column width 270px

.x-form-item {float:left;padding:2px} to fit one row with fields

if you resize the page the fields will fit the row according to the new size

i hope it will be useful

[mlarese]

To avoid IE problems add
.x-form-clear-left{width:0}

[mlarese]

You can put any type of element inside the form and if you add the class 'x-form-item' to them they will behave like a form field



var form = new Ext.form.FormPanel({
labelWidth: 55,
defaultType: 'textfield',
items: [
{ fieldLabel: 'Send To', name: 'to' } ,
{ fieldLabel: 'Subject', name: 'subject' },
{ fieldLabel: 'Subject', name: 'subject' },
{ fieldLabel: 'Subject', name: 'subject' , hideLabel:true },
{xtype:'checkbox' , hideLabel:true , boxLabel:'Fixed'},
{xtype:'button' , text:'Ok' , cls:'x-form-item'},
{xtype:'label' , html:'Ok', cls:'x-form-item'},

{ fieldLabel: 'Subject', name: 'subject' , anchor:'98%' },
{ fieldLabel: 'Subject', name: 'subject' },
{ fieldLabel: 'Subject', name: 'subject' },
{ xtype: 'textarea', fieldLabel:'Subject', name: 'msg' ,anchor:'98%'}]
});

[elnove]

great idea mlarese, do you have an idea in the same way to have a label after (on the right) of a field, such as units or currency.
One of the problems with that is not overlap the field validation message.

[mlarese]

there are some limitations. Using tips you have to use msgTarget = qtip or title or element id
to avoid to mess up the error message. In this case you can put a label on the right side of the input box.

sorry but no more ideas for now

[mlarese]

.x-form-item { float:left; padding:2px; overflow:visible !important; margin-bottom:14px }
.x-form-clear-left{width:0}
.x-form-invalid-msg{position:absolute;z-index:999;white-space:nowrap !important;}


for qtips under

[mlarese]

.x-form-item { float:left; padding:2px; overflow:visible !important; margin-bottom:14px; }
.x-form-clear-left{width:0}
.x-form-invalid-msg{position:absolute;z-index:999;white-space:nowrap !important;}
.x-form-invalid-icon{width:28px;background-position:12px 2px}
label.x-form-item{margin-right:18px;margin-top:2px}

for qtip=side

background-position of x-form-invalid-icon change with label width

[mlarese]

.x-fieldset{float:left;margin-right:1%}

this if you use fieldset