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屋！