extjs网格面板单元格中的多行文本

Posted 2023-02-26

【中文标题】extjs网格面板单元格中的多行文本

【英文标题】：Multiple lines of text in extjs grid panel cell

【发布时间】：2014-03-17 15:02:18

【问题描述】：

我有一根绳子。我想在某些网格单元格中显示多行。以下是我正在生成的具有两行文本的 div。但这不是渲染第二行，即“测试新行”。

<div class="x-grid3-cell-inner x-grid3-col-event x-unselectable" style="height:134px;line-height:134px;" unselectable="on">
  <div>
      <a href="some link">XYZ funding round: Series C</a> (Funding Round)
      <br>
      test new line
  </div>
</div>

这是一个 extjs 3.4 网格。

知道为什么这不会呈现两行吗？

【问题讨论】：

就像现在一样，它可以工作：jsfiddle.net/AndreaLigios/LCSjz;要重现该问题，您应该使用生成的 GRID html / CSS 代码自己创建一个小提琴。可能有一些东西会覆盖默认设置

你是对的。我试图通过将生成的 CSS 应用于小提琴中的 div 来找出问题。

【参考方案1】：

我用网格的 viewConfig 选项解决了这个问题：

viewConfig: 
    loadingText: lang.loading,
    loadMask: true,
    stripeRows: true,
    getRowClass: function(record, rowIndex, rowParams, store) 
        return 'multiline-row';
    
,

在 CSS 文件中：

.multiline-row .x-grid-cell-inner 
    overflow: auto !important;
    white-space: normal !important;
    text-overflow: ellipsis;
    display: block;

并且在 ExtJS 4 中运行良好。

希望对你有帮助。

【参考方案2】：

对于该列：

 renderer: function (value, metaData) 
                 return '<div style="white-space:normal">' + value + '</div>';
             

【讨论】：

当您使用这种方法时，网格在其行下方有一个奇怪的空白区域。你怎么能解决这个问题？

【参考方案3】：

我知道这不完全是您正在做的事情（生成带有换行符的标记），但它具有相似的目的 - 通过提供自定义单元格 XTemplate 在单个单元格中显示多行。这是代码：https://fiddle.sencha.com/#fiddle/5qd

编辑：我在第一列添加了换行符，它也可以工作，但内部单元格样式并未应用于每一行。

【讨论】：

在 4.1 中这会产生 Uncaught TypeError: Ext.grid.GridView is not a constructor