제목 표시 줄과 바로 아래에 탭 표시 줄이있는 레이아웃을 만들려고합니다.
각 탭에 간단한 html 텍스트를 할당하는 방법을 알고 있으며 제목 표시 줄없이 탭 표시 줄 만 사용할 때 작동하도록 만들었습니다. 다음과 같습니다.
Ext.define('MyThirdApp.view.Feed', {
extend: 'Ext.TabPanel',
xtype: 'feedcard',
config:{
tabBar: {
layout: {
pack: 'center'
}
},
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'tab1',
html: 'this is tab 1'
},
{
title: 'tab2',
html: 'here is tab2!'
},
{
title: 'tab3',
html: 'here is tab3!'
}
]
}
});
잘 작동합니다. 그런 다음 다른보기를 정의하고이 탭 표시 줄을 추가하여 그 위에 제목 표시 줄을 추가하려고했습니다.
Ext.define('MyThirdApp.view.Main', {
fullscreen: true,
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'MyThirdApp.view.Feed'
],
config: {
items:[
{
xtype: 'titlebar',
title: 'The main title',
},
{xtype: 'feedcard'}
]
}
});
그 아래에 탭바 만있는 제목 표시 줄이 표시됩니다. 다른 탭을 모두 클릭해도 HTML이 표시되지 않습니다. 왜 이런 일이 발생했는지 또는 내가 뭘 잘못했는지 알지 못하며 MyThirdApp.view.Main의 레이아웃과 extend : 속성을 사용하여 컨테이너 또는 패널로 변경했지만 아무것도 작동하지 않습니다. Sencha의 Kitchensink 예제를 둘러 보았지만 Tab bar UI 소스에서 제목 표시 줄을 정의하는 코드의 일부를 찾지 못했습니다. 어떤 도움을 주시면 감사하겠습니다.
layout: 'fit'기본보기에 추가해보십시오 .
Ext.define('MyThirdApp.view.Main', {
fullscreen: true,
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'MyThirdApp.view.Feed'
],
config: {
layout: 'fit',
items:[
{
xtype: 'titlebar',
title: 'The main title',
},
{xtype: 'feedcard'}
]
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다