ext 탭 패널에 이미지 추가

Question

ext js를 처음 사용하는 방법 ext 탭 패널의 헤더에 이미지를 응용 프로그램의 로고로 추가하려면 어떻게해야합니까? 다음

내 코드입니다 : - 나는 제목으로 나타나고있다 'MyApp를'대신에 로고를 추가 할 필요가

Ext.define('MyApp.view.main.Main', { 
extend: 'Ext.tab.Panel', 
xtype: 'app-main', 
requires: [ 

'MyApp.view.main.MainController', 
'MyApp.view.main.MainModel', 
'MyApp.view.main.List' 
], 
controller: 'main', 
viewModel: 'main', 
defaults: { 
styleHtmlContent: true 
}, 
tabBarPosition: 'bottom', 
items: [ 
{ 
title: 'Home', 
iconCls: 'fa-home', 
layout: 'fit', 
items: [{ 
xtype: 'mainlist' 
}] 
} 
] 
}); 

. 나는 아래 이미지와 같은 것을 원한다. -

Answer 1

나는 이것을 Extjs6에서 만들었고, 로고를 얻기 위해 약간의 수정을했다.

리소스 폴더에 이미지와 CSS를 놓은 다음 CSS 파일에 아래의 CSS를 추가하십시오.

.my-logo-icon { 
background-image: url(../images/newpowered.gif) !important; 

}

다음 CSS를 얻을 수 app.json에서 CSS 경로를 배치합니다. 코드 호출

iconCls: 'my-logo-icon' 

전체 코드가

Ext.define('MyApp.view.main.Main', { 
extend: 'Ext.tab.Panel', 
xtype: 'app-main', 
requires: [ 
    'Ext.plugin.Viewport', 
    'Ext.window.MessageBox', 
    'MyApp.view.main.MainController', 
    'MyApp.view.main.MainModel', 
    'MyApp.view.main.List' 
], 
controller: 'main', 
viewModel: 'main', 
ui: 'navigation', 
tabBarHeaderPosition: 1, 
titleRotation: 0, 
tabRotation: 0, 
header: { 
    layout: { 
     align: 'stretchmax' 
    }, 
    title: { 

     flex: 0 
    }, 
    iconCls: 'my-logo-icon' 
}, 
tabBar: { 
    flex: 1, 
    layout: { 
     align: 'stretch', 
     overflowHandler: 'none' 
    } 
}, 
responsiveConfig: { 
    tall: { 
     headerPosition: 'top' 
    }, 
    wide: { 
     headerPosition: 'left' 
    } 
}, 
defaults: { 
    bodyPadding: 20, 
    tabConfig: { 
     plugins: 'responsive', 
     responsiveConfig: { 
      wide: { 
       iconAlign: 'left', 
       textAlign: 'left' 
      }, 
      tall: { 
       iconAlign: 'top', 
       textAlign: 'center', 
       width: 120 
      } 
     } 
    } 
}, 
items: [{ 
    title: 'Home', 
    iconCls: 'fa-home', 
    // The following grid shares a store with the classic version's grid as well! 
    items: [{ 
     xtype: 'mainlist' 
    }] 
}, { 
    title: 'Users', 
    iconCls: 'fa-user', 
    bind: { 
     html: '{loremIpsum}' 
    } 
}, { 
    title: 'Groups', 
    iconCls: 'fa-users', 
    bind: { 
     html: '{loremIpsum}' 
    } 
}, { 
    title: 'Settings', 
    iconCls: 'fa-cog', 
    bind: { 
     html: '{loremIpsum}' 
    } 
}]}); 

그리고내는 이미지 iconCls에서이 CSS에서 지금

{ 
"path": "resources/css/styles.css" 
} 

당신은이처럼 그것을 할 수

Answer 2

입니다 :

items  : [{ 
     title  : "<img src='../resources/images/whatever.png'>", 
     xtype  : 'home-page', 
     bodyCls : 'menu-tabs' // optional 

    }, { 

}] 

하고 탭이 조금 더 키가 되길 원한다면 단지 CSS로 사용

div[class~="menu-tabs"] div[class~="x-box-scroller-body-vertical"] div[class~="x-box-target"] a[class~="x-tab-default"] span[class~="x-tab-wrap-default"] span[class~="x-tab-button-default"]{ 
    height: 50px; 
}