1

将正文背景设置为透明时，我在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 运行它 -一切都按预期工作的材料，然后使用Ext JS 6.5.2.463 运行它 - 材料以查看错误（带有透明的身体背景涂成白色）。

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

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

4

1 回答 1

0

根据您的要求，您可以为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文件中。

这是我的基于自定义用户界面的应用程序工作 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'
    }]
});
于 2018-01-24T13:18:16.150 回答