Ext JS Classic主题下Grid Panel标题默认颜色修改方法咨询

I’ve run into this exact issue before—Modern and Classic themes in ExtJS have totally different styling structures, so the trick that works for one won’t always translate to the other. Here are three reliable ways to get your Grid Panel header color working in Classic:

1. Quick CSS Override #

Classic themes use specific CSS classes for panel headers, so you can target the Grid’s header directly with custom styles. Add this to your stylesheet:

/* Targets all Grid Panel headers */
.x-grid-panel .x-panel-header {
    background-color: #2c3e50; /* Replace with your desired background color */
    color: #ecf0f1; /* Optional: Change text color for better contrast */
    border-color: #34495e; /* Optional: Match border to your new color scheme */
}

/* If you only want to target a specific Grid, add a custom class */
.my-custom-grid .x-panel-header {
    background-color: #e74c3c;
}

Then just add the cls: 'my-custom-grid' config to your target Grid Panel if you need specificity.

2. Inline Style via Component Config #

If you want to set the color directly on a single Grid without touching external CSS, use the header config to inject inline styles:

Ext.create('Ext.grid.Panel', {
    title: 'My Styled Grid',
    header: {
        style: {
            backgroundColor: '#9b59b6',
            color: '#ffffff',
            padding: '8px 12px' /* Optional: Adjust padding for a cleaner look */
        }
    },
    // Rest of your Grid config (store, columns, layout, etc.)
});

3. Custom Theme (For Global App-Wide Changes) #

If you want this color to apply to all Grid Panels across your app, modify the Classic theme variables using Sencha Cmd:

1. Open your theme’s sass/variables/Panel.scss file
2. Override the relevant theme variables:

$panel-header-background-color: #1abc9c;
$panel-header-color: #ffffff;
$panel-header-border-color: #16a085;

3. Recompile your theme with sencha app build

The reason your original Fiddle didn’t work is that the Modern theme uses completely different component classes and styling hooks—Classic’s panel headers have a distinct DOM structure, so Modern-specific styles won’t take effect here.

内容的提问来源于stack exchange，提问作者Haseeb Ashraf