隐藏网格列会更改行的高度

时间:2012-09-11 18:31:41

标签: grid extjs4.1 textwrapping

我在动态隐藏网格列时遇到了相当烦人的问题。隐藏列后(单元格中包含长文本),网格行的高度显着增加。 隐藏之前 enter image description here

和隐藏操作后

enter image description here

正如你可以看到第一排肯定是太高了。可能这种行为的原因是我在网格单元格中使用文本换行。

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

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

1 个答案:

答案 0 :(得分:2)

我之前亲自遇到过这种奇怪的现象。这个问题是由Ext JS“隐藏”列引起的,方法是将宽度设置为0px。

我的解决方案是将事件侦听器添加到网格标题中,如下所示:

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

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

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

然后这两个函数的实现就是这样做的:

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

可能不是最有效的方法,但它可以完成工作。