如何将背景颜色（或自定义CSS类）应用于网格中的列 - ExtJs 4？ [英] How to apply background color (or custom css class) to column in grid - ExtJs 4?

问题描述

看来它应该是如此简单，但我根本无法完成这件事（我甚至不需要动态地完成它）。例如，假设我有一个简单的2列网格设置，如下所示：

 列：[
 {header：' USER'，dataIndex：'firstName'，width：70，cls：'red'}，
 {header：'CATEGORY'，dataIndex：'category'，width：100} 
] 
  

cls：'red'属性只会影响标题和不是实际的专栏。我已经在其他地方看到过我应该使用自定义渲染器（可能），但是如果我尝试这样的操作：

  {header： 'USER'，dataIndex：'firstName'，宽度：70，
渲染器：函数（值）{
 this.addCls（'red'）; 
返回值; 
} 
} 
  

我仍然感到无聊的白色背景。我也看到有人使用renderer函数定义，如下所示： function（value，metadata，record，rowIndex，colIndex，store），但是当我使用 alert（）来测试输入参数，对于除值之外的所有内容，我得到 undefined ，这让我相信，也许这只适用于ExtJs 4之前的版本。

我也尝试过返回类似于'< span class = red>>'+ value +'< / span>'在我的渲染器函数中，但这只会突出显示文本，而不是更改列的整个背景。 b
$ b

我不想重写默认的Ext css类，因为我想将背景颜色应用于应用程序中的特定网格，而不是全部。

此外，所讨论的网格的所有列可能具有不同的颜色（请注意，在该示例中，我只将该类添加到第一列）。

假定红色在我的css文件中被定义为 .red {background：＃FF0000;} 。

解决方案

为您的列标题定义添加 tdCls 属性，并添加您想要使用的CSS类的值。

 列：[
 {header：'USER'，dataIndex：'firstName'，width：70，tdCls：'red'}，
 {header：'CATEGORY'，dataIndex：'category'，width：100} 
] 
  

It seems like it should be so simple, but I simply cannot get this done (I don't even need it done dynamically). For example, suppose I have a simple 2 column grid setup like so:

    columns : [       
       {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
       {header: 'CATEGORY', dataIndex: 'category', width:100}
    ]

The cls: 'red' attribute only effects the header and not the actual column. I have seen elsewhere that I should be using a custom renderer (maybe), but if I try something like:

{header: 'USER', dataIndex: 'firstName', width:70, 
     renderer: function(value) {
         this.addCls('red');
         return value;
    }
 }

I still get the boring white background. I have also seen people using a renderer function definition like so : function(value, metadata, record, rowIndex, colIndex, store), but when I used an alert() to test the input parameters I get undefined for everything except value, which makes me believe that maybe this was only valid for versions before ExtJs 4.

I also tried returning something like '<span class="red">' + value + '</span>' in my renderer function, but this only highlighted the text, rather than change the entire background of the column.

I do not want to override the default Ext css classes because I want to apply the background colors to a specific grid in the app, and not all of them.

Furthermore, all the columns of the grid in question may have different colors (note that in the example I only added the class to the first column).

Assume that red is defined as .red {background:#FF0000;} in my css file.

解决方案

Add a tdCls attribute to your column header definition, with a value of the CSS class you want to use.

columns : [
   {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
   {header: 'CATEGORY', dataIndex: 'category', width:100}
]

这篇关于如何将背景颜色（或自定义CSS类）应用于网格中的列 - ExtJs 4？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！