如何在Ext JS的Grid中为指定列添加背景色

我尝试为Grid表格中的2列添加背景色，请问该如何实现？是否有可配置的属性？我创建了两个表格并将它们合并为一个，以下是我的代码：

var ALIASGRID = new Ext.grid.EditorGridPanel({
                store : ALIASGRIDStore,
                stripeRows : true,
                hideHeaders : true,
                id : "ALIASGRID",
                region : 'center',
                clicksToEdit : 1,
                autoHeight : true,
                viewConfig : {
                    markDirty : false
                },
                columnLines : true,
                columns : [ {
                    id : 'Test',
                    header : 'Test',
                    dataIndex : 'Test',
                    width : 30,
                    editor: {
                    xtype: 'textfield',
         

           triggers: {
                        search: {
                            cls: 'x-fa fa-search',
                            handler: function (field, trigger, eOpts) {}
                                }
                            }
                        },
                    renderer : renderTooltipAndId
                }],
                listeners : {
                    beforeedit : function(grid) {
                        if (!attributeMgrEnabled) {
                            return false;
                        }
                        // console.log(grid);
                    }
                }
            });
            
var ALIASFOOTER = new Ext.grid.EditorGridPanel({
                enableHdMenu : false,
                id : 'ALIASFOOTER',
                height : 19,
                store : ALIASFOOTERStore,
                columns : [ {
                    id : 'Test',
                    header : 'Testing.',
                    resizable : false,
                    width : 30
                }]});           
                
                
// Table that shows empty rows & a footer
            var layoutTable1 = new Ext.Panel({
                width : 470,
                items : [ ALIASGRID, ALIASFOOTER ],
                renderTo : 'AliasTable'
            });

我曾尝试使用bodyStyle: 'background-color: #ff0000;'属性，但没有效果。

解决方案 #

在ExtJS的Grid列配置中，有两种常用方式给指定列添加背景色：

1. 使用tdCls属性绑定自定义CSS类 #

这是最常用的静态样式设置方式：

• 第一步，在页面中定义CSS类：

.custom-column-bg {
    background-color: #ffeeee !important; /* 替换为你需要的颜色 */
}

• 第二步，在目标列的配置里添加tdCls属性：

columns : [ {
    id : 'Test',
    header : 'Test',
    dataIndex : 'Test',
    width : 30,
    tdCls: 'custom-column-bg', // 添加该行绑定样式类
    // 保留原有其他配置...
}]

2. 通过renderer函数动态设置样式 #

如果需要根据单元格内容调整背景色，或者不想额外写CSS，可以在列的renderer里直接设置样式：

columns : [ {
    id : 'Test',
    header : 'Test',
    dataIndex : 'Test',
    width : 30,
    renderer : function(value, metaData) {
        // 设置单元格背景色
        metaData.style = 'background-color: #ffeeee;';
        // 保留原有render逻辑的返回值
        return renderTooltipAndId(value, metaData);
    },
    // 保留原有其他配置...
}]

适配你的Footer Grid #

上述两种方法同样适用于ALIASFOOTER的列，只需在它的列配置中添加对应属性即可。

注意：bodyStyle是整个Grid容器的样式属性，不会单独作用于列，所以你之前的尝试没有效果是正常的。

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