Results 1 to 2 of 2

Thread: HOWTO: Mulitline Grid Headers

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2013
    Grantham, UK
    Vote Rating

    Default HOWTO: Mulitline Grid Headers


    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:

    .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:

    grid = new Grid<MyRecord>(store, colmodel);
    grid.setView(new GridView<MyRecord>() {
        protected void initColumnHeader() {
    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...)

  2. #2
    Sencha User
    Join Date
    Aug 2014
    Vote Rating


    By default ExtJS grids don't allow text in headers and cells to wrap by setting white-space:nowrap in ExtJS stylesheet.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts