Set label size for formpanel widgets

[christiedavel]

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]

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]

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.

untitled.png
//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]

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]

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]

Tnx for your reply,
It works!!!!

[pete_by]

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]

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]

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/#Exam...e:formsexample
They are using a VerticalLayoutContainer.

[e-omikron]

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/#Exam...e: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.