Ext JS 中的自动换行网格单元 [英] Word-wrap grid cells in Ext JS
问题描述
(这本身不是问题,我正在记录我使用 Ext JS 3.1.0 找到的解决方案.但是,如果您知道更好的解决方案,请随时回答!)
Ext JS Grid 对象的列配置没有允许自动换行文本的本机方式,但有一个 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 文件中添加了以下内容,这是一个简单的修复,似乎不会破坏任何网格功能,但允许我应用于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,但它对我有用,我想将其作为解决方案发布,因为我无法通过搜索 Internet 找到可行的解决方案.
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 上设置样式,我只是选择了单元格类.
I didn't bother with setting a style on the td, I just went right for the cell class.
这篇关于Ext JS 中的自动换行网格单元的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!