Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext GWT Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    christiedavel is on a distinguished road

      0  

    Default Set label size for formpanel widgets

    Set label size for formpanel widgets


    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

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    45
    Vote Rating
    0
    raivis is on a distinguished road

      0  

    Default


    As far as I understand the correct usage of FieldLabel in v3 is:

    Code:
    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.

  3. #3
    Ext GWT Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    christiedavel is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    45
    Vote Rating
    0
    raivis is on a distinguished road

      0  

    Default


    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:
    Code:
    label.setLabelAlign(LabelAlign.TOP);

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    23
    Vote Rating
    0
    pete_by is on a distinguished road

      0  

    Default


    Here is a workaround to adjust FieldLabel width:

    Code:
    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.

  6. #6
    Ext GWT Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    christiedavel is on a distinguished road

      0  

    Default


    Tnx for your reply,
    It works!!!!

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    23
    Vote Rating
    0
    pete_by is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha Premium Member
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    0
    e-omikron is on a distinguished road

      0  

    Default


    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?

  9. #9
    Sencha User
    Join Date
    Jul 2011
    Location
    Germany
    Posts
    174
    Vote Rating
    25
    Andreas Samjeske will become famous soon enough Andreas Samjeske will become famous soon enough

      0  

    Default


    Quote Originally Posted by e-omikron View Post
    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.

  10. #10
    Sencha Premium Member
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    0
    e-omikron is on a distinguished road

      0  

    Default


    Quote Originally Posted by Andreas Samjeske View Post
    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.

    Quote Originally Posted by Andreas Samjeske View Post
    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.