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

时间:2010-01-21 00:26:56

标签: extjs grid word-wrap

(这不是一个问题本身,我正在记录我使用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找到有效的解决方案。

6 个答案:

答案 0 :(得分:74)

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

这是要添加的功能:

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

答案 1 :(得分:18)

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

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

我没有在td上设置样式,我只是去了细胞类。

答案 2 :(得分:13)

如果您只想在某些列中包装文本并使用ExtJS 4,则可以为列中的单元格指定CSS类:

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

在你的CSS文件中:

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

答案 3 :(得分:4)

其他解决方案是:

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

答案 4 :(得分:1)

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

cellWrap:true

它在EXTJS 5.0中运行良好。

答案 5 :(得分:1)

使用

cellWrap: true

如果您仍想使用css,请始终尝试使用主题中的ui,变量等,或使用style属性设置样式。