ExtJS Grid 改变单元格背景颜色的方法

要改变ExtJS Grid中单元格的背景颜色，可以通过在单元格renderer函数中设置样式来实现。具体步骤如下：

1.在Grid的columns中设置renderer函数，例如：

{
  text: '状态',
  dataIndex: 'status',
  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    if (value == '正常') {
      metaData.style = 'background-color:green;color:white;';
    } else {
      metaData.style = 'background-color:red;color:white;';
    }
    return value;
  }
}

2.在renderer函数中根据单元格的值设置样式，例如上述代码中当单元格的值为正常时，将背景颜色设置为绿色，字体颜色设置为白色；当单元格的值不为正常时，将背景颜色设置为红色，字体颜色设置为白色。

注意：在renderer函数中，通过metaData对象来设置单元格的样式，其中style属性用于设置样式，可以设置背景颜色、字体颜色等。

相关问题

extjs 修改grid标题样式

在ExtJS中，如果你想要修改Grid（表格组件）的标题样式，你可以通过CSS来自定义样式，或者直接操作Grid的配置项。以下是两个方法：

1. **通过CSS**：
首先，在你的主题文件（如`mytheme.scss`）或者单独的CSS文件中，添加以下规则来改变Grid列头（ColumnHeader）的样式：

   .x-column-header {
       font-weight: bold; /* 改变字体粗细 */
       color: #333; /* 改变颜色 */
       background-color: #f5f5f5; /* 改变背景色 */
   }

然后应用这个主题到你的应用程序上。

2. **通过配置**：
如果你想在创建Grid的时候立即设置样式，可以这样做：

   var grid = Ext.create('Ext.grid.Panel', {
       columns: [
           { header: 'Title', // 这里是你的列名
             renderer: function(value) { // 使用renderer函数来自定义渲染后的样式
                 return '<span style="font-weight:bold;color:#333;">' + value + '</span>';
             }
           }
       ],
       title: {
           xtype: 'component',
           html: '<div class="custom-title" style="font-weight:bold;">Custom Title</div>' // 自定义title元素
       }
   });

在这里，我们设置了`renderer`用于格式化单元格内容，并将标题作为单独的`Component`实例，可以直接控制其HTML样式。

记得在实际应用中引入并启用相应的CSS，以及处理好浏览器兼容性问题。