ExtJS 4 - 如何为网格的列添加背景颜色？

Posted 2023-02-21

【中文标题】ExtJS 4 - 如何为网格的列添加背景颜色？

【英文标题】：ExtJS 4 - How to add background colors to columns of a grid?

【发布时间】：2011-11-18 15:22:16

【问题描述】：

我有一个网格，我需要在其中为各个列提供不同的背景颜色。

这些列颜色也不应该被mouse-over 颜色覆盖。

我尝试过使用cls 和tdCls，但没有成功。

任何人都可以指导如何实现这一目标吗？

提前致谢。

【问题讨论】：

我已经找到了解决方案。我正在为每一列创建一个渲染器函数，并在其中设置元数据：渲染器：函数（值，元数据，记录，行索引，colIndex，存储） //metadata.tdCls = 'lookUpClass'; metadata.style = '背景：#EBEBF5';返回值； 使用 tdCls 时，它会将颜色应用于交替行而不是每一行。希望这是实现背景颜色的方法，并且可能对某人有所帮助。如果有更好的方法，请分享。

【参考方案1】：

将此添加到您要更改颜色的任何列

renderer:function(value,metaData)
    metaData.style="background-color:#EAA8A8";
    return value;
,

【参考方案2】：

您不需要渲染器。发生的情况是 ExtJS 的斑马条纹样式 (x-grid-row-alt) 和鼠标悬停样式优先于您在 tdCls 中定义的样式。将!important 添加到背景颜色中，它会起作用。例如：

.my-column-style 
    background-color: blue !important;

【参考方案3】：

NetEmp 就在这里，你想要一个渲染器，并且你想使用直接的“样式”方法，或者我在下面使用以下方法：

function greyRenderer(lpValue, opMeta, opData) 


    if (opData.data["Condition"] == 0) 
        opMeta.attr = "style='color: #aaa';";
    

    lpValue = Ext.util.Format.htmlEncode(lpValue); 
    return lpValue;

注意这里我检查特定字段中的行上的值，然后将颜色应用于前景文本和 html 编码输出，您显然可以根据您的特定要求进行切换。

【讨论】：

为什么不使用 opMeta.style 属性？

正如我在答案中提到的，您可以使用 style 方法，但该渲染器只是我玩的一个。我们当时没有使用 ExtJS4，我相信 'attr' 是应用样式的唯一方法 - docs.sencha.com/ext-js/3-4/#!/api/…