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

Question

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

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

不幸的是，TD元素包含 DIV包裹内容的元素，以及 DIV设置为 white-space:nowrap通过 Ext JS 的样式表，因此覆盖 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，但它对我有用，想把它作为一个解决方案，因为我无法通过搜索互联网找到一个可行的解决方案。

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