隐藏网格列改变行的高度 [英] Hiding grid columns change height of rows

问题描述

我在动态隐藏网格列时遇到了非常烦人的问题.在我隐藏列(单元格中有长文本)后，网格行的高度会急剧增加.隐藏前

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

隐藏操作后

如您所见，第一行肯定太高了.这种行为的原因可能是我在网格单元格中使用文本换行.

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; }

是否有任何有效的方法来制作网格行，而不是在隐藏列(并使用 textwrap )后改变它们的高度?

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

推荐答案

我之前亲身遇到过这种奇怪的现象.该问题是由 Ext JS 通过将宽度设置为 0px 来隐藏"列引起的.

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
});

不要使用现有的 x-grid-cell-inner 类，而是像这样新建一个:

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.

这篇关于隐藏网格列改变行的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！