PDA

View Full Version : formPanel with 2 columns, each containing a textField



TheMonolith
25 Feb 2010, 7:29 AM
I created the following JSON code with a GUI builder (http://tof2k.com/ext/formbuilder/): (http://tof2k.com/ext/formbuilder/%29:)


{
xtype:"form",
title:"Form",
labelAlign:"'top'",
items:[{
layout:"column",
items:[{
columnWidth:0.5,
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
},{
columnWidth:0.5,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
boxLabel:"Box label",
name:"checkbox",
inputValue:"cbvalue"
}]
}]
}]
}Why is the checkbox label displayed but not the textfield label (see attached image)?

P.S. I had the same problem when I tried to code it manually

num6java
25 Feb 2010, 2:32 PM
Neither of the fieldLabels are displayed. You have nested a column layout container with your fields inside of the form. The column layout isn't going to render the labels, form layout does that.

What you could do is keep the FormPanel at the top level with a column layout and then put containers with form layouts in that so the labels render. Something like:


{
xtype: 'form',
title: 'Form',
layout: 'column',
labelAlign: 'top',
defaults: {
xtype: 'container',
layout: 'form',
columnWidth: 0.5
},
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'Text',
name: 'textvalue'
}]
}, {
items: [{
xtype: 'checkbox',
fieldLabel: 'Label',
boxLabel: 'Box label',
name: 'checkbox',
inputValue:'cbvalue'
}]
}]
}The forms example at http://www.extjs.com/deploy/dev/examples/form/dynamic.html might also be useful.

-Daniel

TheMonolith
26 Feb 2010, 12:10 AM
Thank you for your answer. It works great.