Ошибка прозрачности тела панели в 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;'
    }]
});

Добавьте этот код в скрипку сенча (внутри launch() и сначала запустите его, используя Ext JS 6.5.0.775 - Материал, где все работает, как ожидалось, а затем запустите его, используя Ext JS 6.5.2.463 - Материал, чтобы увидеть ошибку (панель с прозрачным фоном тела окрашена в белый цвет).

Тем не мение. Есть ли способ исправить эту ошибку с помощью одного CSS или мне нужно установить bodyStyle: 'background: some-color;' каждому panel Я использую для моего приложения.

Обратите внимание, что я использую uiСгенерировано из темы сенча на большинстве моих панелей.

Answer 1

Согласно вашему требованию вы можете использовать ui:'your_ui_name' Конфиг для компонента ExtJS. Вы можете создать свой пользовательский интерфейс в соответствии с вашими требованиями, как показано в примере кода ниже

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