Ext JS 中的自动换行网格单元

Question

请随时回答！）

（这本身不是一个问题，我正在记录我使用 Ext JS 3.1.0 找到的解决方案。但是，如果您知道更好的解决方案， Ext JS Grid 对象没有允许自动换行文本的本机方法，但有一个 css 属性可以覆盖由 Ext JS Grid 对象创建的 TD 元素的内联 CSS网格。

不幸的是，TD 元素包含包装内容的 DIV 元素，并且 DIV 设置为 white-space:nowrap 由 Ext JS 的样式表定义，因此覆盖 TD CSS 没有任何好处。

我将以下内容添加到我的主 CSS 文件中，这是一个简单的修复，似乎不会破坏任何网格功能，但允许我应用于 TD 的任何空白设置通过直到DIV。

.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;
    }

YMMV，但它对我有用，想将其作为解决方案发布，因为我无法通过搜索互联网找到可行的解决方案。

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           
}]

Answer 2

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

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

我没有费心在 td 上设置样式，我只是直接选择单元类。

Answer 3

如果您只想在某些列中换行文本并使用 ExtJS 4，则可以为列中的单元格指定 CSS 类：

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

并在 CSS 文件中：

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

Answer 4

其他解决方案是：

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

Answer 5

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

cellWrap: true

它在 EXTJS 5.0 中运行良好。

Answer 6

如果您仍然想使用

cellWrap: true

css，请始终尝试在主题内使用 ui、变量等，或使用 style 属性设置样式。