PDA

View Full Version : Multiple form fields in one row



logicmedia
28 Sep 2010, 10:53 PM
Hey all,

I want to make a form where I have multiple fields in one row. More specifically I'd like the label, a textfield, a combobox and a button on each row.

How can this be achived in Ext Touch?

Regards,

Thomas

evant
28 Sep 2010, 11:53 PM
Use a hbox layout.

steve1964
28 Sep 2010, 11:56 PM
Set the layout of the form:


layout: 'hbox'

logicmedia
29 Sep 2010, 12:46 AM
I have played with 'hbox' layout without great success - could I ask for a breif code-snippet example of how to apply the formfields in a hbox layout

evant
29 Sep 2010, 12:53 AM
Pretty trivial:



Ext.setup({
onReady: function(){
new Ext.form.FormPanel({
fullscreen: true,
layout: {
type: 'hbox',
pack: 'start'
},
items: [{
xtype: 'textfield',
label: 'Item 1'
},{
xtype: 'textfield',
label: 'Item 2'
}]
});
}
});

logicmedia
29 Sep 2010, 2:44 AM
This is really teasing me. I get what you are doing, but I guess my problem is that I want to be able to differ from row to row. In the example below I'd like the first textfield to be on one row with one label and on the next row I'd like the last two textfields with one label. Is that possible?



xtype: 'form',
items: [{
xtype: 'fieldset',
layout: {
type: 'hbox',
pack: 'start'
},
items: [{
xtype: 'textfield',
label: 'Label 1'
},{
xtype: 'textfield',
label: 'Label 2'
},{
xtype: 'textfield'
}]
}]


If you guys get the time a form layout example could be super nice in the package.

Regards,

Thomas Nielsen

evant
29 Sep 2010, 2:50 AM
Same principle applies:



Ext.setup({
onReady: function(){
new Ext.form.FormPanel({
fullscreen: true,
items: [{
layout: 'hbox',
items: [{
xtype: 'textfield',
label: 'Item 1'
}, {
xtype: 'textfield',
label: 'Item 2'
}]
},{
layout: 'hbox',
items: [{
xtype: 'textfield',
label: 'Item 3'
}, {
xtype: 'textfield',
label: 'Item 4'
},{
xtype: 'textfield',
label: 'Item 5'
}]
},{
xtype: 'textfield',
label: 'No layout'
}]

});
}
});

geranimo1
7 Dec 2010, 12:21 PM
Sorry to resurrect an old thread.

I got multiple form fields in a row using this technique, but it seems that the border styles are off if I follow this. The row that is the hbox matches the x-form-fieldset .firstchild and thus gets a curved border, where it should not be getting one. Is there a workaround I'm missing?