W07uf4r.png

One of my app's requirements is to have text wrapping in the header for a grid, so i set about working out how. It's fairly straightforward and i've not encountered any problems with it so far, although it's not been through testing yet. Colin asked me to share my findings on here in case it's useful for others. The root of it is simply to add the following CSS rule to the <span> elements in the header:

Code:
.header-multiline td span {    
    display: inline-block;
    white-space: normal;
}
(Colin suggested that this might be a safer selector, but i've not tried it: .header-multiline td>:first-child)

The only difficulty is that it needs to have been applied to the DOM before Sencha's layout calculations take place, otherwise it just makes a mess of things. This precludes using the ViewReady event. Instead i've found it works well to just add the CSS class as soon as the header element is created in the initColumnHeader method of GridView:

Code:
grid = new Grid<MyRecord>(store, colmodel);
grid.setView(new GridView<MyRecord>() {
    @Override
    protected void initColumnHeader() {
        super.initColumnHeader();
        header.addStyleName("header-multiline");
    }
});
Be sure to use addStyleName and not setStyleName

Hope someone else finds this useful some day

EDIT: I've put this in the wrong forum, can a mod move it to the 3.x one please? (or delete it and i'll recreate it... sorry...)