How to do a delphi-like form layout?

[joeri]

Delphi's layout system is an absolute layout system where you anchor controls to a fixed distance from any edge. If you anchor a control to the right edge, it will change its x coordinate when the container resizes. When you anchor a control to both edges, it will keep both its x coordinate and its distance from the right edge.

I am having issues translating this to Ext.

Take a look at this example form:
form.png

In the middle row the "Valid From" and "Valid Until" date fields are anchored only to the right edge, so they will not resize, only change their x position. The "Customer" field however is anchored to both edges, so it will resize.

Any suggestions on how I can realize such a layout cleanly?

[laurentParis]

I suggest for start

    new Ext.FormPanel({
        labelAlign: 'top',
        itemCls: 'float-left',
        renderTo:document.body,
        width: 500, defaultType: 'textfield',
        items: [{
                fieldLabel: 'First Name',
                name: 'first', allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email', vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time', minValue: '8:00am', maxValue: '6:00pm'
            })
        ]}); 

use css declaration

    <style>
    .float-left {float: left;margin-right: 4px;}
    </style>

After you can refine autoadjust size of your fields by create your own form layout

[Condor]

No, you can't do that with float layout.

Column or hbox layout are much better suited for this, e.g.

xtype: 'form',
defaults: {
  xtype: 'container',
  anchor: '0',
  layout: 'hbox',
  defaults: {
    xtype: 'container',
    layout: 'form',
    labelAlign: 'top',
    defaultType: 'textfield'
  }
},
items: [{
  items: [{
    items: {
      fieldLabel: 'Object Class',
      width: 200
    }
  },{
    items: {
      fieldLabel: 'Code',
      width: 200
    }
  },{
    items: {
      fieldLabel: 'Reference',
      flex: 1
    }
  }]
},{
  items: [{
    items: {
      fieldLabel: 'Customer',
      flex: 1
    }
  },{
    items: {
      fieldLabel: 'Valid From',
      width: 200
    }
  },{
    items: {
      fieldLabel: 'Valid Until',
      flex: 1
    }
  }]
},{
  items: [{
    items: {
      fieldLabel: 'Default Time Table',
      flex 1
    }
  },{
    items: {
      fieldLabel: 'Default Time Zone',
      flex: 1
    }
  }]
}]

[laurentParis]

so great +1 )

[joeri]

It hadn't occurred to me to wrap each field in its own formlayout container.

But, this solution is still a bit of a hack. It would probably be better if anchorlayout was extended to allow delphi-like anchoring.