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

问题描述

动态地隐藏网格列的问题让我很烦恼。在隐藏列（在单元格中有长文本）后，网格行的高度急剧增加。
在隐藏之前

和隐藏操作后

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

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

是否有任何有效的方法来制作网格行，而不是在隐藏列后更改高度使用textwrap）？

解决方案

我以前亲自遇到过这个奇怪的现象。这个问题是由Ext JS通过设置宽度为0px而导致的隐藏列造成的。

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

  //我是网格
 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; / *可能需要！重要的，不确定* / 
} 
   

然后执行这两个函数：



  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; //标记检查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（）; 
} 
} 
  

可能不是最有效的方法，工作完成。

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

解决方案

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.

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