代码之家 › 专栏 › 技术社区 › richardtallent

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

word-wrap grid extjs

richardtallent · 技术社区 · 16 年前

(这本身不是问题,我正在记录使用extJS3.1.0找到的解决方案。但是,如果您知道更好的解决方案,请随时回答!)

ExtJS网格对象的列配置没有允许文字换行的本机方法,但有一个 css 属性重写 TD 网格创建的元素。

不幸的是, 技术发展部 元素包含 DIV 包装内容的元素,以及 div 设置为 white-space:nowrap 通过ExtJS的样式表,因此重写 TD CSS不好用。

我在主CSS文件中添加了以下内容,这是一个简单的修复出现不破坏任何网格功能,但允许 white-space 设置我应用到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,但它对我有效,我想把它作为一个解决方案,因为我无法通过搜索InterWebs找到一个有效的解决方案。

6 回复 | 直到 8 年前

Jonathan Julian 16 年前

不是“更好的解决方案”,而是类似的解决方案。我最近需要让每个网格中的所有单元格都进行换行。我使用了类似的基于CSS的修复程序(这是针对extJS2.2.1的):

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

我没有费心在TD上设置风格,我只是去上了细胞班。

Jack Kleinman 16 年前

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

下面是要添加的函数:

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

CTarczon 14 年前

如果只想将文本换行到某些列中并使用extjs 4,则可以为列中的单元格指定CSS类:

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

在您的CSS文件中:

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

Tiago Sippert mdahlman 12 年前

另一个解决方案是:

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

Augustine Joseph 11 年前

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

CelpRe:真的

它在extjs 5.0中运行良好。

Tarabass 11 年前

使用

cellWrap: true

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