Hiding grid columns change height of rows

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 enter image description here

and after hide operation

enter image description here

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

Eric · Accepted Answer · 2012-09-12 16:34:02Z

2

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.

answered Sep 12, 2012 at 16:34

Eric

7,00528 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

For anyone who finds this answer, this is apparently fixed in 4.2.0 as EXTJSIV-6734. There's no forum thread for it because it was reported internally, but it's in the release notes.

Collectives™ on Stack Overflow

Hiding grid columns change height of rows

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related