PDA

View Full Version : Set label size for formpanel widgets



christiedavel
18 Dec 2011, 10:18 PM
Hi,

In Ext-Gwt 2 one was able to set the label size of widgets by calling setLabelSize(..) method on the formPanel. In Ext-Gwt 3 this method is gone. I see there is a FieldLabel widget but the setFieldLabel method has no effect. Any help

raivis
19 Dec 2011, 2:10 AM
As far as I understand the correct usage of FieldLabel in v3 is:



TextField field = new TextField();
FieldLabel label = new FieldLabel(field, "Your label");

// Attach only label to a container, field will be attached automatically. All the labels and fields will be resized to the same size automatically, you have to size only the outer container.

christiedavel
19 Dec 2011, 2:46 AM
Thanks for the reply. However the problem I have is how to specify the label width. When I look at the source code for FieldLabel it seems that by calling setWidth we can specify the percentage width for our fieldLabel widget where the fieldLabel consist of labelText and a textField widget. The labelWidth defaults to 100 according the javaDocs which results in my longer labels displays in two lines.

30135
//My code
TextField txtRegistrationNr = new TextField();
FieldLabel fieldLabel = new FieldLabel( txtRegistrationNr, labelText);
fieldLabel.setWidth("80%");
fieldLabel.setLabelWidth(150);

I can't see that the value specified for labelWidth is ever used in FieldLabel source code.
Hope I made myself more clear.
Any ideas?

raivis
19 Dec 2011, 3:50 AM
By calling method setWidth("80%") you specify FieldLabel width to 80% of the outer container (that is, field label including the Field widget, as they are combined as one).

There is inner interface in FieldLabel class called FieldLabelAppearance that is responsible for rendering the widget, so there is no wonder you can't see labelWidth used in FieldLabel class.

But I can only confirm, that I can't get your caption (Regstration Number) in one line as well. I guess there has to be bug in FielLabelAppearance, because label's width is always 100px in firebug no matter what size i've set.
I can olny suggest you to use shorter label and use tooltip until it's been fixed. Or you can set label to be placed on the top of the field:

label.setLabelAlign(LabelAlign.TOP);

pete_by
17 Jan 2012, 11:27 AM
Here is a workaround to adjust FieldLabel width:


FieldLabel fieldLabel = new FieldLabel(field, "Your very long label title here", new FieldLabelDefaultAppearance() {
@Override
public void render(SafeHtmlBuilder sb, String id, FieldLabel label) {
label.setLabelWidth(150);
super.render(sb, id, label);
}
});

The problem is that label is rendered to html in constructor, before one can set label width and affect the render process.

christiedavel
17 Jan 2012, 11:03 PM
Tnx for your reply,
It works!!!!

pete_by
18 Jan 2012, 11:46 AM
Would be great if someone from Ext GWT fix it.

Actually, there should be a way either to set size using the longest label on the same form or introduce smart label wrapping (on two or more lines) respecting the set label width.

e-omikron
28 Jan 2015, 6:08 AM
Is FormPanel still the only way how to set the width of a field label group? Even three years later? The documentation advises to use FormPanel 'sparingly and only when needing HTML 1.0 type forms'. So what should we use to layout label widths?

Andreas Samjeske
28 Jan 2015, 9:08 AM
Is FormPanel still the only way how to set the width of a field label group? Even three years later? The documentation advises to use FormPanel 'sparingly and only when needing HTML 1.0 type forms'. So what should we use to layout label widths?

In GXT3 FormPanel is only needed for the actual submit (if u planning on doing one). It has no longer anything to do with layout of fields.

Take a look at the examples. http://www.sencha.com/examples/#ExamplePlace:formsexample
They are using a VerticalLayoutContainer.

e-omikron
28 Jan 2015, 10:52 PM
In GXT3 FormPanel is only needed for the actual submit (if u planning on doing one). It has no longer anything to do with layout of fields.


FormPanel is still the only panel which sets the label width of child FieldLabels.


Take a look at the examples. http://www.sencha.com/examples/#ExamplePlace:formsexample
They are using a VerticalLayoutContainer.
All the labels have a width of 100px, which is the default size for FieldLabel. It's convenient that the examples don't contain longer labels. The VerticalLayoutContainer makes the input field wider if there is more space. The label always stays at 100px.

Andreas Samjeske
29 Jan 2015, 2:00 AM
FormPanel is still the only panel which sets the label width of child FieldLabels.


All the labels have a width of 100px, which is the default size for FieldLabel. It's convenient that the examples don't contain longer labels. The VerticalLayoutContainer makes the input field wider if there is more space. The label always stays at 100px.

Yes, I was wrong! FieldLabel.setLabelWidth(int) only gets called from FormPanel.setLabelWidth(int).

Seems like javadoc is totally misleading here. :s