extjs 网格列文本环绕答案

【问题标题】：extjs grid column text wrap aroundextjs 网格列文本环绕
【发布时间】：2012-05-15 23:23:04
【问题描述】：

我正在尝试使用 ExtJS 创建一个属性网格。我遇到的问题是该列的文本太宽。无论如何强制文本环绕并创建一个更高的行？这是我目前所拥有的：http://jsfiddle.net/lordzardeck/pLYt3/1/

基本上，我希望将标题行展开以阅读以下内容：

A Reason for Spelling (Level B):  
Teacher's Guidebook

这可能吗？如果有，怎么做？

【问题讨论】：

Word-wrap grid cells in Ext JS的可能重复

标签： extjs datagrid

【解决方案1】：

只需添加这个 CSS：

.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner {
    white-space: normal;
}

.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner,
.x-property-grid .x-grid-row-over .x-grid-property-name .x-grid-cell-inner {
    background-image: none;
}

.x-property-grid .x-grid-row .x-grid-property-name,
.x-property-grid .x-grid-row-over .x-grid-property-name
{
    background-position: -16px 1px;
    background-image: url("http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/themes/images/default/grid/property-cell-bg.gif");
    background-repeat: repeat-y;
}

【讨论】：

刚刚添加了css来将背景图像从嵌套的div（不随行拉伸）移动到表格单元格本身
太棒了！但为了让您知道，您必须从第一条规则中删除 .x-grid-property-name 才能使其正常工作

【解决方案2】：

使用网格的customEditors 属性。

查看您的updated example。

【讨论】：

这很有用，但我需要它来显示文本（不是 textarea），即使在不编辑时也是如此。

【解决方案3】：

使用 ExtJS 6 设置 white-space: normal; 会导致滚动时出现渲染问题

您应该在列上设置cellWrap: true，正如该线程所指出的那样：

https://www.sencha.com/forum/showthread.php?205554-extjs-grid-column-text-wrap-around-auto-expand

【讨论】：