ExtJS：如何用列将文本包装在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 解决方案有效并且我对此投了赞成票。

但以防万一您更喜欢使用 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;}