跨越多个列的 ExtJS 网格单元格内容答案

【问题标题】：Span ExtJS grid cell contents across more than one column跨越多个列的 ExtJS 网格单元格内容
【发布时间】：2011-07-15 03:36:37
【问题描述】：

如果单元格的文本大于该单元格的大小，是否可以使该单元格跨越多个列？

例如，目前我的网格看起来像这样：

+--------+----------+-----+-----+-----+
|Product |Descrip...|     |     |     |
+--------+----------+-----+-----+-----+

由于第 2 列的内容太大而无法放入单元格，因此内容被截断。

我希望能够看到描述列的整个文本。因此跨越单元格，如图所示：

+--------+----------+-----+-----+-----+
|Product |Description of the product  |
+--------+----------+-----+-----+-----+

ExtJS 4 网格可以做到这一点吗？

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

您可以指定列中的宽度以获得所需的列大小，如下所示：

var grid = Ext.create('Ext.grid.Panel',{        
id  : 'example_grid',
columns : [{
id : 'product',
header : 'Product',
width : 50
},{
id : 'description',
header : 'Description of the Product',
width : 150
}]
});

【讨论】：

【解决方案2】：

我几乎可以肯定这是不可能的。但是，您可以使用摘要插件在整行中显示内容。

【讨论】：

【解决方案3】：

我怀疑您是否可以连接 extjs4 网格中的单元格。但是您可以将文本转移到下一行。

.wrapme {
  /** this rule is for css3. **/
  /** You can find crossbrowser workaround on the internet **/
  white-space: pre-wrap;
  word-wrap: break-word;
}

然后将 cls 包含到列配置中

{
  id : 'description',
  header : 'Description of the Product',
  width : 150,
  cls : 'wrapme'
}

【讨论】：