1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default Answered: FieldLabel Width

    Answered: FieldLabel Width


    We're having issues with the width of our fieldlabels. We're trying to coax them into taking up a certain amount of space in the container by adding them to VerticalLayoutContainers and giving them 100% width (new VerticalLayoutData(1, -1) but they tend to wrap without reaching it. I've used set LabelWidth to increase the space but this is fixed pixels. Is there a better way to handle dynamic sizing fieldlabels?
    We have the same problem whether the FieldLabel contains a widget or not. It's really a problem when people resize windows or have varying resolutions. What's the best approach to sizing the label?
    Thanks

  2. Each FieldLabel gets its own width set - it doesn't measure all other local* FieldLabels to ensure they are consistent - it relies on you to give it reasonable defaults. One could perhaps build a widget like FieldLabel which takes text and a field and just lines them up, but doesn't try to get the widget aligned from one row to the next. This would probably be a CssFloatLayoutContainer - first add a Label, with width of -1 (i.e. measure it), then add the field itself with width of 1.0 (i.e. use all remaining unallocated space).

    *How local should it be? In that same parent container? Somehow in the same column, across several containers? Across the app?

    If you want to pre-measure your label strings before you try to draw, consider the GXT class TextMetrics. This will allow you to ask questions about how big a particular line of text will be. It may be necessary to first bind(Element) to a visible element that has the right font/size/decoration/weight as label in question - you'll need to test to see how it applies in your use case.

    Instead of measuring each string within a specific area and taking the max to get them to all line up, join all strings with line breaks between them (i.e. the <br> tag), and measure the width all at once. This will perform only one measurement operation - these aren't exactly cheap, since they require the browser to render and lay out your text in the dom.

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    89
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Each FieldLabel gets its own width set - it doesn't measure all other local* FieldLabels to ensure they are consistent - it relies on you to give it reasonable defaults. One could perhaps build a widget like FieldLabel which takes text and a field and just lines them up, but doesn't try to get the widget aligned from one row to the next. This would probably be a CssFloatLayoutContainer - first add a Label, with width of -1 (i.e. measure it), then add the field itself with width of 1.0 (i.e. use all remaining unallocated space).

    *How local should it be? In that same parent container? Somehow in the same column, across several containers? Across the app?

    If you want to pre-measure your label strings before you try to draw, consider the GXT class TextMetrics. This will allow you to ask questions about how big a particular line of text will be. It may be necessary to first bind(Element) to a visible element that has the right font/size/decoration/weight as label in question - you'll need to test to see how it applies in your use case.

    Instead of measuring each string within a specific area and taking the max to get them to all line up, join all strings with line breaks between them (i.e. the <br> tag), and measure the width all at once. This will perform only one measurement operation - these aren't exactly cheap, since they require the browser to render and lay out your text in the dom.

  4. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default


    Wow, little more complicated than I thought. Thanks for the insight. I'll schedule a project to investigate this.

Thread Participants: 1

Tags for this Thread