Question

（这不是一个问题本身，我正在记录我使用Ext JS 3.1.0找到的解决方案。但是，如果您知道更好的解决方案，请随时回答！） < / p>

Ext JS Grid对象的Column配置没有允许自动换行文本的本机方式，但有一个css属性可覆盖由TD元素创建的TD元素。网格。

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

我将以下内容添加到我的主要CSS文件中，出现的简单修复不会破坏任何网格功能，但允许我应用于TD的任何white-space设置传递给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，但它适用于我，希望将其作为一种解决方案，因为我无法通过搜索Interwebs找到有效的解决方案。

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属性设置样式。

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

6 个答案: