1. #1
    Sencha Premium Member
    Join Date
    Oct 2013
    Location
    Grantham, UK
    Posts
    6
    Vote Rating
    0
    Stik is on a distinguished road

      0  

    Default HOWTO: Mulitline Grid Headers

    HOWTO: Mulitline Grid Headers


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

  2. #2
    Sencha User
    Join Date
    Aug 2014
    Posts
    3
    Vote Rating
    0
    evelyndaniel is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread