PDA

View Full Version : How to do a delphi-like form layout?



joeri
5 Oct 2010, 11:57 PM
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:
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?

laurentParis
6 Oct 2010, 12:24 AM
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
6 Oct 2010, 12:37 AM
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
6 Oct 2010, 12:49 AM
so great +1 )

joeri
6 Oct 2010, 2:16 AM
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.