Sencha Premium Member
Grid RowExpander - Some Trick to wrap text?
Following along with the existing example:
I liked the idea of expanding a row to show a block of text, and so I was following the above example. I created a RowExpander that is practically a carbon-copy of what is in the example, however while the text in the example wraps in the Grid, the text in my application goes straight off to the right, no wrapping or '...' to indicate additional text either.
I'm not sure why the text would wrap in the example, yet not for my own grid. My grid was occupying the center area of a border layout container, thus expanding to the full available size, but sticking it in the western region and limiting its size still exhibited the same problem.
Is there some trick here I am missing? I'm using GXT 3.0.1 with GWT 2.4. The Grid itself is just 3 text columns + 1 for the row expansion column.
Thanks for any insights.
Can you share some code as a runnable sample? Or maybe try modifying that example EntryPoint with some of your own details, and see which change causes the wrapping to stop happening?
The linked url is compiled from GXT 3.0.1 and GWT 2.4.0 as well, suggesting that the difference in either in your code, your .gwt.xml file, or your .html file.
Sencha Premium Member
I poked at it some more this morning and I've discovered the root cause.
I was testing this feature using a block of contiguous text "abcabcabcabc" whereas the text in the example was composed of "word space period word word word". The latter wraps as one would expect, the former does not wrap at all. A little odd, but at least I know why it is happening now.
I suspect the problem here is that the browser doesn't know how to wrap a word that is so long - how do you decide where the syllable ends to insert a dash (especially when the word is "abcabcabcabc")?
I'm not sure we can come up with an general answer for this - do you expect this to be a use case in your app? My starting point would be to look at the TextMetrics class, and measure how large the text is. You may be able to instruct it that the max width should be some fixed value (say, 200px), and ask then if the text is *still* too wide to fit. Beyond that, you'd need to find the long word, and somehow hyphenate it in such a way as to keep it readable.