在extjs 6.5.2上的面板体透明度问题

Question

我在extjs6.5.2现代 panel上发现了一个bug，当时它的身体背景设置为透明。

下面是再现问题的代码。

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

将此代码添加到森查小提琴 (在launch()函数中)，并首先使用ExtJS6.5.0.775- Material运行它，所有操作都按预期进行，然后使用ExtJS6.5.2.463- Material来查看错误(透明主体背景的面板被绘制为白色)。

不管怎么说。有没有办法用一个css来修补这个bug，或者我必须将bodyStyle: 'background: some-color;'设置为我在应用程序中使用的每个panel。

请注意，我在我的大多数面板上使用了从sencha themer生成的uis。

Answer 1

根据您的要求，您可以对ui:'your_ui_name'组件使用ExtJS配置。您可以根据需求创建自定义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文件。

这是我的基于用户界面的应用程序工作Git实验室图书馆.您可以下载/克隆并在系统中运行以进行测试。我希望这将有助于您或指导您实现您的要求。

代码片段

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