隐藏网格列改变行的高度

Posted

技术标签:

【中文标题】隐藏网格列改变行的高度【英文标题】:Hiding grid columns change height of rows 【发布时间】:2012-09-11 18:31:40 【问题描述】:

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

隐藏操作后

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

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

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

【问题讨论】:

【参考方案1】:

我以前亲身遇到过这种奇怪的现象。该问题是由 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();
    

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

【讨论】:

对于找到此答案的任何人,这显然已在 4.2.0 中修复为 EXTJSIV-6734。没有论坛帖子,因为它是内部报告的,但它在发行说明中。

以上是关于隐藏网格列改变行的高度的主要内容,如果未能解决你的问题,请参考以下文章

在 wpf 中,我如何使数据网格适合窗口高度

如何使用情节提要更改wpf中网格行的高度

在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度

UICollectionViewCell 具有 2 列网格和动态高度

如何将字体大小绑定到可变网格大小

父行的颤振列自动高度