Ошибка прозрачности тела панели в extjs 6.5.2

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

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

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

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

  • 0
    Если я положу это в скрипку сенча, я не вижу ничего, кроме пустой страницы. Вы можете просто подготовить скрипку и отправить прямую ссылку на нее.
  • 0
    ХОРОШО. Извини, я не понял. Я имею в виду добавить его в скрипку sencha внутри функции launch ().
Теги:
panel
extjs6-modern

1 ответ

0

В соответствии с вашим требованием вы можете использовать конфигурацию 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, работающая в обычном ui-приложении. Вы можете выполнить загрузку/клонирование и запустить в своей системе для тестирования. Надеюсь, это поможет вам или поможет вам достичь вашего требования.

Фрагмент кода

//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'
    }]
});
Поделиться
  • 0
    Спасибо за ваш ответ. Я попробую ваше решение, но я не уверен, что оно будет работать. background-color устанавливается transparent из темы sencha, поэтому это не ошибка темы. Так или иначе, ext преобразует background-color: 'transparent' в background-color: 'white' . Поэтому я искал "безопасное" переопределение на panel CSS.
  • 0
    Сначала рассмотрим примеры, это работает в библиотеке gitlab.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню