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.

If i put this into a sencha fiddle, I see nothing but a blank page. You could just prepare a fiddle and send a direct link to it. — flx, Jan 18 '18 at 10:43
OK. I am sorry i wasn't clear. I mean add it to a sencha fiddle inside the launch() function. — Zoti, Jan 18 '18 at 10:48

Narendra Jadhav · Answer 1 · 2018-01-24T13:39:40.710

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'
    }]
});

Thanks for your reply. I will try your solution but i am not sure that it will work. The `background-color` is being set to `transparent` from the sencha themer so it's not a theme bug. Somehow ext converts `background-color: 'transparent'` to `background-color: 'white'`. So i was looking for a "safe" override on `panel` css. — Zoti, Jan 24 '18 at 14:39
has this [git-lab](https://gitlab.com/njdhv105/custom-ui-based-app/tree/developer) resolved your issue ? — Narendra Jadhav, Mar 14 '18 at 13:23
i haven't tried it because we are using Sencha Themer for the custom uis, so it will not help me. But i will give it a try to see if it actually works. — Zoti, Mar 14 '18 at 15:24

Panel Body Transparency Bug on extjs 6.5.2

1 Answers1