How to do a delphi-like form layout?

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:
Attachment 22689

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?

I suggest for start

PHP Code:

---

    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

Code:

---

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

---

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

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

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

Code:

---

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
    }
  }]
}]

---

so great +1 )

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.