在Ext JS中如何自动换行网格单元格

Question

（这不是一个问题，我正在记录我使用 Ext JS 3.1.0 发现的解决方案。但如果您知道更好的解决方案，请随意回答！）

Ext JS Grid 对象的 Column 配置没有本机方法来允许换行文本，但有一个 css 属性来覆盖网格创建的 TD 元素的内联 CSS。

不幸的是，TD 元素包含一个包装内容的 DIV 元素，并且 Ext JS 样式表将该 DIV 设置为 white-space:nowrap，因此覆盖 TD CSS 没有任何作用。

我在我的主 CSS 文件中添加了以下内容，这是一个简单的修复方法，看起来似乎不会破坏任何网格功能，但允许传递给 DIV 的任何 white-space 设置。

.x-grid3-cell {
    /* TD is defaulted to word-wrap. Turn it off so
       it can be turned on for specific columns. */
    white-space:nowrap;
    }

.x-grid3-cell-inner {
    /* Inherit DIV's white-space from TD parent, since
       DIV's inline style is not accessible in the column
       definition. */
    white-space:inherit;
    }

对每个人的情况可能不同，但对我有用，因为在互联网上搜索不到有效的解决方案，所以我想将其作为一个解决方案分享出来。

- richardtallent

---

覆盖CSS以处理此类问题是正确的方法。Ext不可能为可能需要的每种样式提供JS配置。通常可以轻松覆盖任何非结构性CSS（这是创建自定义主题的整个基础）。 - Brian Moeskau

如果您同时使用4.1版本并且正在隐藏，您可能需要记住此问题：http://stackoverflow.com/q/12375769/640030 - Andrea

Answer 1

如果您只想将包装应用于一列，可以添加自定义渲染器。

以下是添加函数：

function columnWrap(val){
    return '<div style="white-space:normal !important;">'+ val +'</div>';
}

然后在想要换行的每一列中添加renderer: columnWrap

new Ext.grid.GridPanel({
[...],
columns:[{   
     id: 'someID',
     header: "someHeader",
     dataIndex: 'someID',
     hidden: false,
     sortable: true,
     renderer: columnWrap           
}]

- Jack Kleinman

---

那是一个很好的解决方案...但是如果您需要编辑单元格怎么办？TextField和TextArea似乎占用不同数量的单元格，但不是正确的数量。 - Sofox

这在Mozilla中运行良好，但在IE8中不起作用。有没有IE8的解决方案？ - Freakyuser

谢谢，非常完美。在Chrome、Mozilla和Edge上测试过Extjs 4.2，它们都可以正常工作。 - SensacionRC

Answer 2

并不是“更好的解决方案”，但有一个类似的解决方案。最近我需要允许每个网格中的所有单元格都可以换行。我使用了类似的基于CSS的修复方法（这是针对Ext JS 2.2.1的）：

.x-grid3-cell-inner, .x-grid3-hd-inner {
  white-space: normal; /* changed from nowrap */
}

我没有费心在 td 上设置样式，而是直接使用了 cell 类。

- Jonathan Julian

---

在ExtJS 4中：".x-grid-cell-inner { white-space: normal; }" - digz6666

数字列怎么样？这对于普通文本列来说很好用，但对于数字列来说不行。 - Razgriz

Answer 3

如果你只想在特定的列中包装文本，并且正在使用 ExtJS 4，你可以为该列中的单元格指定一个 CSS 类：

{
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

在您的CSS文件中：

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

- CTarczon

---

我认为许多其他主题中建议的这些CSS样式调整不起作用，因为内联CSS样式会优先于它们。 - duckduckgo

添加 !important 可以在必要时覆盖内联样式。 - CTarczon

尝试过这个方法，但在IE8 Extjs4上无效。还有其他解决方法吗？ - Freakyuser

Answer 4

另一个解决方案是：

columns : [
    {
        header: 'Header',
        dataIndex : 'text',
        renderer: function(value, metaData, record, rowIndex, colIndex, view) {
            metaData.style = "white-space: normal;";
            return value;
        }
    }
]

- Tiago Sippert

---

尝试过这个方法，但在IE8上无效Extjs4。还有其他的解决方法吗？ - Freakyuser

Answer 5

最好的方法是将cellWrap设置为true，如下所示。

cellWrap: true

在EXTJS 5.0中运行良好。

- Augustine Joseph

Answer 6

使用

cellWrap: true

如果您仍然想使用CSS，请尝试在主题中使用UI、变量等，或者使用style属性设置样式。

- Tarabass

---

仅适用于ExtJs 5+。 - Lorenz Meyer