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，以及处理好浏览器兼容性问题。