Question

I have quite annoying problem with hiding grid columns dynamically. After I hide columns (with long text in cells), the height of grid rows dramatically increases.
Before hide

and after hide operation

As You can see first row is definitely too high. Probably the reason of that behavior is the fact, that I use text wrap in grid cells.

.x-grid-cell-inner { white-space: normal; }

Is there any efficient way to make grid rows, not to change their height after hiding columns (and using textwrap ) ?

Answer 1

I’ve personally encountered this strange phenomenon before. The problem is caused by Ext JS “hiding” columns by setting the width to 0px.

My solution was to add event listeners to the grid header like this:

// me is the grid
me.headerCt.on({
    columnhide: me.removeWordWrapOnHide,
    columnshow: me.addWordWrapOnShow,
    scope:      me
});

Instead of using the existing x-grid-cell-inner class, make a new one like this:

<style type="text/css">
    td.grid-cell-wordwrap > div {
        white-space: normal; /* may need !important, not sure */
    }
</style>

Then the implementation of these two functions did this:

removeWordWrapOnHide: function(headerCt, column){
    var me = this,
        wordWrapRe = /wordwrap/;
    if(column.useWordWrap || wordWrapRe.test(column.tdCls)){
        column.tdCls = column.tdCls.replace("grid-cell-wordwrap", "");
        column.useWordWrap = true;  // Flag to check on show
        me.view.refresh();
    }
},

addWordWrapOnShow: function(headerCt, column){
    var me = this,
        wordWrapRe = /wordwrap/;
    if(column.useWordWrap && !wordWrapRe.test(column.tdCls)){
        column.tdCls = "grid-cell-wordwrap " + column.tdCls;
        me.view.refresh();
    }
}

Might not be the most efficient way, but it gets the job done.