PDA

View Full Version : how can i place 2 form elements side by side?



neongrau
28 Sep 2009, 7:17 AM
i got a formpanel with an ok button and 2 spinner inputs, obe for the hour and one for the minutes which want to group together below a DatePicker inside an Ext.Window to get a complete DateTimePicker.

atm i got the 2 fields rendered below, and i'm struggling to find a way to place them side-by-side.

can someone give me a hint how i culd achieve that?

this is what i got atm:

var datepicker = new Ext.DatePicker({
startDay:1
});
var hourfield = new Ext.ux.form.SpinnerField({
minValue:0,
maxValue:23,
allowDecimals:false,
accelerate:true,
width:42
});

var minutefield = new Ext.ux.form.SpinnerField({
minValue:0,
maxValue:59,
allowDecimals:false,
accelerate:true,
width:42
});

var formpanel = new Ext.form.FormPanel({
bpdyBorder:false,
border:false,
buttonAlign:'center',
items:[hourfield, minutefield],
buttons: [{id: "btnOK", text: "OK"}]
});

var datepickerDialog = new Ext.Window({
title:'DatePicker',
bodyBorder:false,
width:192,
resizable:false,
items:[datepicker, formpanel],
closeAction:'hide'
});

dlbjr
28 Sep 2009, 7:32 AM
var formpanel = new Ext.form.FormPanel({
bpdyBorder: false,
border: false,
buttonAlign: 'center',
items: [{
layout: 'column',
items: [
{ columnWidth: .5, layout: 'form', items: [hourfield] },
{ columnWidth: .5, layout: 'form', items: [minutefield] }
]
}],
buttons: [{ id: "btnOK", text: "OK"}]
});

zhegwood
28 Sep 2009, 12:57 PM
I do it like this because I don't like building nested column or table layouts. Either way works just fine though.



floatElement: function(obj,which,form) {
var n = obj.el.dom;
while(n.className.indexOf("x-form-item") === -1) {
if (Ext.get(n).dom.type === "form") {
return;
} else {
n = n.parentNode;
}
}
Ext.get(n).setStyle("float",which);
if (Ext.isIE) { //must set width of this container explicitly in IE.
var width = obj.width+form.layout.labelAdjust;
Ext.get(n).setStyle("width",width+"px");
}
},

getClearDiv: function() {
var div = new Ext.Component({
autoEl: {
tag: "div",
style: "clear:both;"
}
});
return div;
},

/*...*/

items: [
{
xtype: "textfield",
fieldLabel: "Email",
listeners: {
render: {
fn: function(obj) {
this.floatElement(obj,"left",Ext.getCmp("frmId"));
},
scope: this
}
}
},
{
xtype: "textarea",
fieldLabel: "Address",
width: 300,
height: 50,
listeners: {
render: {
fn: function(obj) {
this.floatElement(obj,"left",Ext.get("frmId"));
},
scope: this
}
}
},
this.getClearDiv(),
{
/*next form item*/
}
]