如何为ExtJS表格指定列配置背景色？需用属性而非函数

不用渲染函数的话，你可以通过列配置的tdCls属性结合CSS类实现，这是纯配置式的解决方案，步骤如下：

1. 定义自定义CSS类 #

先在页面样式中添加针对列单元格的背景色类，加上!important确保覆盖ExtJS默认样式优先级：

/* 第一列红色背景 */
.column-bg-red {
    background-color: #ff0000 !important;
}

/* 第二列蓝色背景（示例） */
.column-bg-blue {
    background-color: #0000ff !important;
}

2. 在列配置中指定tdCls #

修改网格的列配置，给需要设置背景色的列添加tdCls属性，关联刚才定义的CSS类：

var ALIASGRID = new Ext.grid.EditorGridPanel({
    // 原有配置保持不变...
    columns : [ {
        id : 'Test',
        header : 'Test',
        dataIndex : 'Test',
        width : 30,
        tdCls: 'column-bg-red', // 新增：指定第一列背景色类
        editor: {
            xtype: 'textfield',
            triggers: {
                search: {
                    cls: 'x-fa fa-search',
                    handler: function (field, trigger, eOpts) {}
                }
            }
        },
        renderer : renderTooltipAndId
    },
    // 第二列示例（如需给第二列加背景色）
    {
        id: 'SecondColumn',
        header: 'Second Column',
        dataIndex: 'SecondCol',
        width: 100,
        tdCls: 'column-bg-blue' // 指定第二列背景色类
    }],
    // 原有配置保持不变...
});

关于bodyStyle不生效的原因 #

bodyStyle是作用于整个网格的body容器（整个表格区域），并非针对单个列的单元格，因此无法实现指定列单独设置背景色的需求。

内容的提问来源于stack exchange，提问作者Pushpak Bannore