ExtJS 6 - добавить изменяемый размер изображения / логотипа в верхнее меню - PullRequest
Новая
       3

ExtJS 6 - добавить изменяемый размер изображения / логотипа в верхнее меню

0 голосов
/ 12 июня 2018

Я перепроектирую внешний интерфейс для универ-проекта, написанного на ExtJS 6. Прямо сейчас мне интересно, как правильно добавить изображение в контейнер, который соответствует размеру:

Я пробовал поле отображения, используя значение: "img = ... />" но я не могу сделать так, чтобы изображение подходило должным образом - это просто большой размер.То же самое относится и к «html: img = ... />».

, также адресуя идентификатор: «TopMenu» с #TopMenu {} в css, похоже, не оказывает никакого влияния независимо от параметров, которые я пытаюсь изменить:( Я подозреваю, что значения по умолчанию для ExtJS имеют более высокий приоритет, чем мои собственные настройки, или я просто не обращаюсь к контейнеру правильно. 

    Ext.define('textImager.view.menu.TopMenu', {
    extend: 'Ext.panel.Panel',
    // id für css: #TopMenu
    id: 'TopMenu',
    xtype: 'TopMenu',
    layout: 'hbox',
    items: [
    // goethe logo
    {
        flex: 1,
        id: 'GoetheLogo'
    },
    // Website titel
    {
        flex: 8,
        id: 'Titel', 
        html: 'TextImager'
    },
    // dropdown menu
    {
        flex: 1,
        id: 'DropdownMenu', 
        xtype: 'button',
        html: 'menu',
        menu: [
        {xtype: 'button',
        html: 'test1'}]
    },

    ]
});

текущий css: 

 #TopMenu-body{}
 #GoetheLogo-body{
    background-image:url(../resources/images/menu/TT_logo_transparent.png);
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    background: rgba(123,123, 123, 0.8);
 }
 #Titel{}
 #DropdownMenu{}

просто изменение размера будетплохой обходной путь, и я также должен настроить фон, который в настоящее время тоже не работает.

Я был бы очень признателен за понимание того, как правильно обращаться к контейнерам с помощью css.

1 Ответ

0 голосов
/ 12 июня 2018

Я нашел решение - оно может быть не лучшим, но я вполне доволен результатом: 

// TT logo mit Link zur Website
    {
        flex: 1,
        xtype: 'button',
        height: '100%',
        //TODO: add link
        html: '<div class="TT_logo"><img src="./resources/images/menu/TT_logo_transparent.png"></div>'
    },

css: 

.TT_logo{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}
.TT_logo img{
    max-width: 100%;
    max-height: 100%;
}
...