ExtJS:如何用List包装ListView中的文本?

时间:2010-09-03 12:16:53

标签: listview extjs textwrapping

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

Example image

如何为列表视图中的单元格设置white-spacenormal

3 个答案:

答案 0 :(得分:7)

这应该在您的列定义中:

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

答案 1 :(得分:3)

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

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

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

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

.listViewColumnWrap { white-space:normal; }

答案 2 :(得分:1)

这是一种跨浏览器的方式来覆盖默认的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;}