Tuesday, April 10, 2012

Ext JS 4: How to wrap text in grid headers or cells

Here's a CSS hack for ExtJS 4 to wrap the text in grid columns for all grids in the application:
.x-column-header-inner .x-column-header-text {
    white-space: normal;
}

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}
And here's the trick to make it work for a single grid. You should configure your grid with an id:
{
    xtype   : 'grid',
    id      : 'somegrid',
    ...
}
And add this id to the CSS path:
#somegrid .x-column-header-inner .x-column-header-text {
    white-space: normal;
}

#somegrid .x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}
Here's a hack to wrap text in grid cells:
.x-grid-cell-inner {
    white-space: normal
}
And that's the same hack for a single grid:
#somegrid .x-grid-cell-inner {
    white-space: normal
}