Question

我将 extjs 6.5.2 [现代] 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 fiddle（launch()函数内）并首先使用 Ext JS 6.5.0.775 - Material 运行它，其中一切都按预期工作，然后运行它使用 Ext JS 6.5.2.463 - Material 来查看错误（具有透明主体背景的面板被涂成白色）。

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

请注意，我在大多数面板上使用了从sencha themer生成的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文件。

这是我的 custom-ui-based-app 正在运行的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'
    }]
});

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

1 个答案: