ExtJS：如何用List包装ListView中的文本？

Question

我有一个包含4列的 ExtJS ListView控件。其中一列包含扩展列宽的文本，因此部分文本位于下一列的下方。

如何为列表视图中的单元格设置white-space到normal？

Answer 1

这应该在您的列定义中：

{
    header: 'Besked',
    dataIndex: 'besked',
    tpl: '<p style=\"white-space:normal\";>{besked}</p>'
}

Answer 2

Sdavids solution有效，我投了赞成票。

但是，如果你喜欢使用css类而不是样式，这就是：

{
    header: 'Besked',
    dataIndex: 'besked',
    cls: 'listViewColumnWrap'
}

然后你需要在 css文件中使用这一行：

.listViewColumnWrap { white-space:normal; }

Answer 3

这是一种跨浏览器的方式来覆盖默认的css类，使所有列表视图，网格和组合框选择菜单都包装其文本内容：

.x-list-body dt {white-space: normal;}
.x-list-body dt em { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-grid3-row-flag { white-space: normal; background-color: #ffc; }
.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; }
.x-grid3-cell-inner { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-combo-list-inner .x-combo-list-item { white-space: normal; }
.x-combo-list-item { white-space: pre-wrap !important; word-wrap: break-word !important;}