ExtJS 6.5.2[Modern]面板主体透明性Bug修复方案咨询

Absolutely, you can fix this issue with a single CSS rule—no need to manually set bodyStyle on every panel in your app. Here's how to handle it, with options tailored to your use of Sencha Themer:

Option 1: Global Fix (Applies to All Panels) #

Add this CSS to your application's stylesheet (or the CSS panel in Sencha Fiddle):

.x-panel-body {
    background-color: transparent !important;
}

This overrides the hardcoded white background that’s being applied to panel bodies in ExtJS 6.5.2’s Material theme—this is exactly why your background: transparent setting was getting ignored.

Option 2: Targeted Fix (Preserves Themer-Generated UI) #

If you don’t want to affect all panels (since most of your UI uses Sencha Themer styles), use a custom class to target only the panels that need transparency:

1. Add this CSS rule:

.transparent-panel .x-panel-body {
    background-color: transparent !important;
}

2. Update your panel configuration to include the custom class:

{ 
    xtype: 'panel', 
    flex: 1, 
    cls: 'transparent-panel', // Attach the custom class
    bodyStyle: 'background: transparent;' 
}

This way, only panels marked with transparent-panel will get the transparent background, leaving your Themer-designed UI completely intact.

How to Verify #

Paste the relevant CSS into the CSS section of your Sencha Fiddle, then run it with ExtJS 6.5.2 Material—your transparent panel will no longer show a white background, matching the correct behavior you saw in 6.5.0.

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