Ext JS中的单词网格单元格 [英] Word-wrap grid cells in Ext JS
问题描述
(这不是一个问题本身,我正在记录一个使用Ext JS 3.1.0的解决方案,但如果您知道更好的解决方案,请随时回答) / p>
Ext JS Grid对象的列配置不具有本机的方式来允许文字包装的文本,但是有一个 css
属性覆盖由网格创建的 TD元素的内联CSS
不幸的是, TD
元素包含包含内容的 DIV
元素,而 DIV
被Ext JS的样式表设置为 white-space:nowrap
,所以覆盖 TD
CSS并不好。
我将以下内容添加到我的主要CSS文件中,这是一个简单的修复程序,出现不会破坏任何网格功能,但允许任何 white-space
设置我申请TD传递到 DIV
。
.x-grid3-cell {
/ * TD默认为单词换行。关闭它,所以
它可以打开特定的列。 * /
white-space:nowrap;
}
.x-grid3-cell-inner {
/ *从TD父项继承DIV的空格,因为
DIV的内联样式在列
定义。 * /
white-space:inherit;
}
YMMV,但它适用于我,想把它当作一个解决方案,因为我无法通过搜索Interwebs找到一个工作的解决方案。
不是一个更好的解决方案一。我最近需要允许每个网格中的所有单元格包装。我使用了类似的基于CSS的修复(这是针对Ext JS 2.2.1):
.x-grid3-cell- inner,.x-grid3-hd-inner {
white-space:normal; / *从nowrap * /
更改
我没有打扰设置样式在td上,我刚刚进入细胞类。
(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)
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.
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.
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, 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.
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 */
}
I didn't bother with setting a style on the td, I just went right for the cell class.
这篇关于Ext JS中的单词网格单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!