Ext JS 中的自动换行网格单元格 [英] Word-wrap grid cells in Ext JS

问题描述

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

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

The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.

不幸的是，TD 元素包含一个包装内容的 DIV 元素，并且该 DIV 设置为 white-space:nowrap 通过 Ext JS 的样式表，所以覆盖 TD CSS 没有好处.

Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.

我将以下内容添加到我的主 CSS 文件中，这是一个简单的修复，似乎不会破坏任何网格功能，但允许我将任何 white-space 设置应用于TD要传递到DIV.

I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the 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，但它对我有用，想把它作为一个解决方案，因为我无法通过搜索互联网找到一个可行的解决方案.

YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.

推荐答案

不是更好的解决方案"，而是类似的解决方案.我最近需要允许每个网格中的所有单元格进行换行.我使用了类似的基于 CSS 的修复(这是针对 Ext JS 2.2.1):

Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):

.x-grid3-cell-inner, .x-grid3-hd-inner {
  white-space: normal; /* changed from nowrap */
}

我没有费心在 td 上设置样式，我直接进入了 cell 类.

I didn't bother with setting a style on the td, I just went right for the cell class.

这篇关于Ext JS 中的自动换行网格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！