Panel Body Transparency Bug on extjs 6.5.2

Question

I found a bug on extjs 6.5.2 [modern] panel when setting its body background to transparent.

Here is the code that reproduces the issue.

Ext.create({
    xtype: 'panel',
    bodyStyle: 'background: red;',
    bodyPadding: true, // don't want content to crunch against the borders
    fullscreen: true,
    layout: {
        type: 'vbox',
        align: 'stretch',
        pack: 'start'
    },
    title: 'Filters',
    items: [{
        xtype: 'panel',
        flex: 1,
        bodyStyle: 'background: green;'
    }, {
        xtype: 'panel',
        flex: 1,
        bodyStyle: 'background: transparent;'
    }]
});

Add this code to a sencha fiddle (inside the launch() function) and first run it using Ext JS 6.5.0.775 - Material where everything works as expected and then run it using Ext JS 6.5.2.463 - Material to see the bug (the panel with the transparent body background is painted white).

Anyway. Is there a way to patch this bug with a single css or i have to set bodyStyle: 'background: some-color;' to every panel i use for my application.

Note that i use uis generated from a sencha themer on most of my panels.

Answer 1

As per your requirement, you can use ui:'your_ui_name' config for ExtJS component. You can create your custom UI as per your requirement like below code example

@mixin extjs-panel-ui($ui:null, $bg-color:null) {
    .#{$prefix}panel-#{$ui} {
        background-color: $bg-color;
        .x-panel-body-el {
            background-color: transparent;
        }
    }
}
//For UI red panel
@include extjs-panel-ui-classic('red-panel', $red-panel-bg);

This above code should be written your scss file.

Here is my custom-ui-based-app working Git-lab library. You can do download/clone and run in your system for testing. I hope this will help you or guide you to achieve your requirement.

Code Snippet

//Css part for creating custom UI
$red-panel-bg:red;
$transparent-panel-bg:transparent;
$green-panel-bg:green;
@mixin extjs-panel-ui($ui:null, $bg-color:null) {
    .#{$prefix}panel-#{$ui} {
        background-color: $bg-color;
        .x-panel-body-el {
            background-color: transparent;
        }
    }
}

//For UI red panel
@include extjs-panel-ui('red-panel', $red-panel-bg);
//For UI green panel
@include extjs-panel-ui('green-panel', $green-panel-bg);
//For UI transparent panel
@include extjs-panel-ui('transparent-panel', $transparent-panel-bg);


//Creating ExtJS panel using Custom UI 
Ext.create({
    xtype: 'panel',
    title: 'Users',
    fullscreen: true,
    iconCls: 'x-fa fa-user',
    ui: 'red-panel',
    layout: 'vbox',
    html: 'Main Panel with RED UI',
    defaults: {
        xtype: 'panel',
        flex: 1,
        margin: 5,
        padding: 20
    },
    items: [{
        ui: 'green-panel',
        html: 'Panel with green UI'
    }, {
        ui: 'transparent-panel',
        html: 'Panel with transparent UI'
    }]
});