[FNR] GroupingView group separator rendering problem + solution proposal

[genobis]

Hi there!

The problem:
Group separator (I mean the horizontal bar with group name and collapse/expand button) width is equal to browser window width. So if grid content is wider than browser window, after horizontal scrolling group separator seems to be cut. For example, if browser window is 1280px width, and grid width is 2000px, group separator ends at 1280px counting from left edge of screen. This does not affect functionality, but looks really bad.

The source:
I've examined GXT code carefully and found out, that in com.extjs.gxt.ui.client.widget.grid.GroupingView line 281 width is passed to the style attribute:

String gstyle = "width:" + getTotalWidth() + ";";

And it's set to the correct width value! So, for example, in previous example, gstyle is equal to "width:2000;". Generated HTML with this values is returned to GridView.renderRows and then GridView.refresh methods, the latter calls following code in line 543:

mainBody.setInnerHtml(renderRows(0, -1));

...and there it fails. Element's innerHTML is set and rendered rows are visible in browser, but DOM inspector shows that "style" value is empty.

Solution:
Solution is surprisingly simple and safe (very unlikely to cause any regressions). When a numerical value is set, CSS standard requires a unit.

The following code (suggested replacement for com.extjs.gxt.ui.client.widget.grid.GroupingView/281):

String gstyle = "width:" + getTotalWidth() + "px;";

would produce "width:2000px;" which solves the problem. Checked.

Workaround:
Until this bug is fixed this way or another, I'd like to share my workaround with others. This one is dirty, like most workarounds, but works well Just use this class instead of original GroupingView.

public class FixedGroupingView extends GroupingView {
    @Override
    protected void doGroupStart(StringBuilder buf, GroupColumnData g, List<ColumnData> cs, int colCount) {
        final String fixedStyle=g.style.replace(";", "px");
        buf.append(templates.startGroup(g.groupId, g.css, fixedStyle, g.group.toString()));
    }
}

Cheers!

PS: What bothers me is that in Ext GWT 2.2.0 Explorer, there is a "px" after width value. Either its NOT 2.2.0 there, or it's magic

[sven]

Thanks for this detailed report. This is fixed now in SVN as of revision 2254

[genobis]

You're welcome, nice to see that fixed