extjs grid设置某列背景颜色和字体颜色的实现方法

下面是详细的攻略。

需求描述

我们要实现在 extjs grid 控件中，设置指定列的背景颜色和字体颜色，以便突出显示。

实现方法

为了实现这个需求，我们可以采用以下两种方法。

方法一：自定义列的 renderer 函数

在 grid 配置中可以为每一列设置 renderer 函数，用于渲染该列的数据，我们可以在该函数中根据数据的值来设置列的样式，包括背景颜色和字体颜色。

以下是一个示例代码：

Ext.create('Ext.grid.Panel', {
  title: 'My Grid Panel',
  store: store,
  columns: [
    { text: 'Name', dataIndex: 'name', renderer: function (val, meta, record) {
      if (val === 'Tom') { // 如果数据是 Tom，则设置背景颜色为红色，字体颜色为白色
        meta.style = 'background-color:red;color:white;';
      }
      return val;
    }},
    { text: 'Email', dataIndex: 'email' },
    { text: 'Phone', dataIndex: 'phone', flex: 1 }
  ],
  height: 200,
  width: 400,
  renderTo: Ext.getBody()
});

在上面的代码中，我们为 name 列设置了一个 renderer 函数，如果数据值为 Tom，就设置该单元格的背景颜色为红色，字体颜色为白色。

方法二：使用 CSS 样式表

我们也可以通过在 CSS 样式表中定义一个类，用于设置需要修改的列的样式，并在列的 renderer 函数中为该列的单元格添加该类。

以下是一个示例代码：

Ext.create('Ext.grid.Panel', {
  title: 'My Grid Panel',
  store: store,
  columns: [
    { text: 'Name', dataIndex: 'name', renderer: function (val, meta, record) {
      if (val === 'Tom') { // 如果数据是 Tom，则为该单元格添加 highlight 类
        meta.tdCls = 'highlight';
      }
      return val;
    }},
    { text: 'Email', dataIndex: 'email' },
    { text: 'Phone', dataIndex: 'phone', flex: 1 }
  ],
  height: 200,
  width: 400,
  renderTo: Ext.getBody()
});

下面是对应的 CSS 样式表：

.highlight {
  background-color: red;
  color: white;
}

在上面的代码中，我们为 name 列设置了一个 renderer 函数，如果数据值为 Tom，则为该单元格的 td 元素添加 highlight 类，该类在 CSS 样式表中定义了需要修改的样式。这样，所有 td 元素中包含 highlight 类的单元格就会应用样式，达到了我们的修改目的。

总结

以上就是实现 extjs grid 设置某列背景颜色和字体颜色的两种方法。通过 renderer 函数和 CSS 样式表的组合使用，我们可以轻松实现网格控件的样式自定义需求。