GXT / GWT - how to detect a label's text will take too much space. (not fit in one line)

Question

I'm working on a web application in GXT.

I need a way to determine, at runtime if the text from a label is too large and show something like: click to view all text (shorter text maybe).

Then all the text will be shown in a pop-up.

I don't know how I can tell that the text will not fit. Should I approximate by the number of letters, let's say my container is 400px in width, and I have a 50 letter text, i can assign a medium width per letter, like 7px / letter?

Do you have any suggestions? Maybe there's already a component that does this.

Thanks.

EDIT:

In one part of the app, my labels are in a FlexTable. I was thinking of going through the FlexTable cells and get the height of every cell, and if the height is more than one normal line height (20px?), trim the label.

Question is: how to I get the height of a FlexTable cell? Or the height of a FlexTable row?

Answer 1

Take a look to TextMetrics class: com.extjs.gxt.ui.client.util.TextMetrics

It's post-render, so you'll have to relayout if needed

Answer 2

OK guys, hope it helps someone, here it goes:

The FlexTable is in a LayoutContainer (I know mixing GXT and GWT components is not the brightest of ideas, but I have no FlexTable component in GXT).

This will recursively trim the labels, 10 characters at a time, until they don't wrap on the second row. It will also add a tooltip to the label.

@Override
protected void onAfterLayout() {
    super.onAfterLayout();
    boolean reLayoutNeeded = false;
    for (int rowIterator = 0; rowIterator < table.getRowCount(); rowIterator++) {
        int cellCount = table.getCellCount(rowIterator);
        for (int currentCell = 0; currentCell < cellCount; currentCell++) {
            Widget currentWidget = table.getWidget(rowIterator, currentCell);
            Label label = (Label) currentWidget;
            if (currentWidget.getOffsetHeight() > MAXIMUM_ROW_HEIGHT) {
                if (label.getToolTip() == null) {
                    label.setToolTip(label.getText());
                }
                label.setText(label.getText().substring(0, label.getText().length() - 10) + "...");
                table.setWidget(rowIterator, currentCell, label);
                reLayoutNeeded = true;
            }
        }
    }

    if (reLayoutNeeded) {
        layout(true);
    }
}