extjs 6.5.2 上的面板主体透明度错误

Question

我在extjs 6.5.2 [modern] panel上发现了一个错误，将其正文背景设置为透明。

下面是重现该问题的代码。

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

将此代码添加到 sencha 小提琴(在 launch() 函数内(并首先使用 Ext JS 6.5.0.775 运行它 - 一切都按预期工作的材料，然后使用 Ext JS 6.5.2.463 运行它 - 查看错误的材料(具有透明主体背景的面板被涂成白色(。

无论如何。有没有办法用单个 css 修补此错误，或者我必须为我用于应用程序的每个panel设置bodyStyle: 'background: some-color;'。

请注意，我在大多数面板上使用从煎茶主题器生成的ui。

Answer 1

根据您的要求，您可以使用 ExtJS 组件ui:'your_ui_name'配置。您可以根据需要创建自定义 UI，如以下代码示例所示

@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);

上面的代码应该写你的scss文件。

这是我的自定义基于 UI 的应用程序工作 Git-lab 库。您可以下载/克隆并在系统中运行以进行测试。我希望这能帮助您或指导您实现您的要求。

代码片段

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