我是一名sencha touch初学者，我正在开发一个使用sencha touch和Sencha Architect的网络应用程序。我使用标签布局。我想保持底部标签栏始终显示。 例如： http://dev.rainbowriders.dk/podcast/public/podcast.jpg
当我点击列表项时。我使用下面的代码移动到另一个视图。
var nav = Ext.ComponentQuery.query('#nav')[0];
nav.push({
xtype: 'episodes',
title: 'Episodes'
});
问题是当我移动到剧集视图时。底部的标签栏将被隐藏。就像这样 http://dev.rainbowriders.dk/podcast/public/episodes.jpg
有什么样的人可以告诉我如何保持tabbar始终显示？我不想将剧集视图（第二个截图）添加到TabPanel。因为它应该是Podcast视图（第一个截图）子视图。所以我希望看到的结果是当我移动到Episodes视图时。底部的标签栏仍然显示并保持第一个标签激活。
我很抱歉我的英语很差。我希望我能清楚地描述我的问题。谢谢。 以下是整个代码： 主视图
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview',
requires: [
'MyApp.view.MyTab'
],
config: {
itemId: 'nav',
navigationBar: {
baseCls: 'x-navigation',
docked: 'top',
itemId: 'navbar',
minHeight: '50px',
layout: {
align: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
align: 'right',
centered: false,
hidden: false,
itemId: 'editPodcast',
ui: 'plain',
iconCls: 'pencil'
}
]
},
items: [
{
xtype: 'mytab',
title: 'My Podcast'
}
]
}
}）;
的TabPanel：
Ext.define('MyApp.view.MyTab', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytab',
requires: [
'MyApp.view.Podcast',
'MyApp.view.Category',
'MyApp.view.Setting'
],
config: {
tabBar: {
docked: 'bottom',
itemId: 'mytabbar',
style: 'background: #fff;border:none;',
layout: {
align: 'center',
type: 'hbox'
}
},
items: [
{
xtype: 'podcast',
itemId: 'podcast',
iconCls: 'music1'
},
{
xtype: 'category',
itemId: 'category',
iconCls: 'home-btn'
},
{
xtype: 'setting',
itemId: 'setting',
title: '',
iconCls: 'settings1'
}
]
}）;
播客视图：
Ext.define('MyApp.view.Podcast', {
extend: 'Ext.Container',
alias: 'widget.podcast',
config: {
ui: '',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
flex: 1,
docked: 'top',
style: 'border: none;\r\nbackground: #8fced6;',
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'searchfield',
itemId: 'mysearchfield',
width: 220,
label: ''
},
{
xtype: 'spacer'
},
{
xtype: 'segmentedbutton',
disabled: false,
itemId: 'segmentbtn',
ui: 'light',
hideOnMaskTap: false,
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
docked: 'left',
itemId: 'listbtn',
ui: 'plain',
iconCls: 'listview',
text: ''
},
{
xtype: 'button',
docked: 'right',
itemId: 'boxbtn',
ui: 'plain',
iconCls: 'thumbview',
text: ''
}
],
listeners: [
{
fn: function(component, eOpts) {
var me = this;
me.setPressedButtons(0);
},
event: 'initialize'
}
]
}
]
},
{
xtype: 'container',
itemId: 'unplaybar',
style: 'border: none;\r\nbackground: #F1515F;',
ui: '',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 1,
itemId: 'unplayedbtnleft',
style: 'color: #fff;',
ui: 'plain',
width: 214,
labelCls: 'x-button-label unplayedlabel',
text: 'Unplayed Episodes'
},
{
xtype: 'button',
itemId: 'unplayedbtnright',
style: 'color: #fff',
ui: 'plain',
width: 48
}
]
},
{
xtype: 'container',
hidden: true,
html: 'Podcasts',
itemId: 'podcastsearchtitle',
style: 'border: none;\r\nbackground: #f25260;\r\nheight:35px;\r\ncolor:white;\r\npadding-left:10px;',
ui: '',
layout: {
type: 'hbox'
}
},
{
xtype: 'panel',
flex: 2,
hidden: false,
itemId: 'podcastcontent',
ui: '',
layout: {
animation: 'flip',
type: 'card'
},
items: [
{
xtype: 'list',
hidden: true,
itemId: 'mylist',
scrollable: 'vertical',
itemTpl: [
'<img class="photo shadow" src="{podcast.thumbnail}" onerror="this.src= basicUrl + \'/img/no_img.png\';" width="60" height="60"/>',
'<div class="list-info">',
' <div class="podcast-name">{podcast.title}</div>',
' <tpl if="podcast_type === 0">',
' <div class="music-toal">{episodes.total}</div>',
' <tpl else>',
' <div class="video-toal">{episodes.total}</div>',
' </tpl>',
'</div>',
'<div class="unplayed-label">',
'<span >{episodes.unwatched}</span>',
'</div>',
''
],
store: 'PodcastStore',
itemHeight: 70,
plugins: [
{
autoPaging: true,
noMoreRecordsText: ' ',
type: 'listpaging'
}
]
},
{
xtype: 'dataview',
itemId: 'mydataview',
margin: 5,
ui: '',
scrollable: 'vertical',
inline: true,
itemTpl: [
'<div class="pview">',
' <img class="shadow" src="{podcast.thumbnail}" onerror="this.src= basicUrl + \'/img/no_img.png\';" width="155" height="155"/>',
' <div class="unplayed-label-box">',
' <span >{episodes.unwatched}</span>',
' </div>',
'',
'</div>'
],
store: 'PodcastStore'
}
]
},
{
xtype: 'container',
hidden: true,
html: 'Episodes',
itemId: 'epresulttitle',
style: 'border: none;\r\nbackground: #f25260;\r\nheight:35px;\r\ncolor:white;\r\npadding-left:10px;',
ui: '',
layout: {
type: 'hbox'
}
},
{
xtype: 'list',
flex: 2,
hidden: true,
itemId: 'episearchlist',
scrollable: 'vertical',
itemTpl: [
'<img class="photo shadow" src="<tpl if="thumbnail == \'\'">/img/no_img.png <tpl else>{thumbnail}</tpl>" onerror="this.src= basicUrl + \'/img/no_img.png\';" width="60" height="60"/>',
' <div class="list-info">',
' <div class="podcast-name" title="{title}">{title}</div>',
' <tpl if="type == false">',
' <div class="music-box">',
' <span class="music-icon-unplayed"></span><span class="music-date">{datePublished:date("m.d.Y")} {duration}</span>',
' </div>',
' <tpl else>',
' <div class="video-box">',
' <span class="video-icon-grey"></span><span class="video-date">{datePublished:date("m.d.Y")} {duration}</span>',
' </div>',
' </tpl>',
' <div class="player"></div>',
' </div>'
],
store: 'MyEpisodeSearchStore',
itemHeight: 90,
plugins: [
{
autoPaging: true,
type: 'listpaging'
}
]
}
]
}）;
剧集视图：
Ext.define('MyApp.view.Episodes', {
extend: 'Ext.Container',
alias: 'widget.episodes',
config: {
itemId: 'episodes',
scrollable: 'vertical',
items: [
{
xtype: 'toolbar',
docked: 'top',
style: 'border: none;\r\nbackground: #8fced6;',
items: [
{
xtype: 'label',
itemId: 'podcastname',
style: 'color: #000;\r\nfont-size: 14px;',
ui: ''
},
{
xtype: 'spacer'
},
{
xtype: 'button',
itemId: 'btnsubscribe',
style: 'background: #fff;\r\ncolor: #2d5f73;\r\nborder: none;',
text: 'Subscribe'
},
{
xtype: 'button',
itemId: 'btnunsubscribe',
style: 'background: #fff;color: #2d5f73;border: none;',
text: 'UnSubscribe'
}
]
},
{
xtype: 'list',
docked: 'top',
height: '100%',
itemId: 'mylist2',
style: 'font-size: 12px',
scrollable: true,
itemTpl: Ext.create('Ext.XTemplate',
' <tpl if="episode_html == true">',
' <div style="min-height: 125px;">',
' <p>',
' <div style="float: left; text-align:center;">',
' <img width="100px" height="100px" src="{thumbnail}" onerror="this.src= basicUrl + \'/img/no_img.png\';" style="margin: 5px 10px 5px 5px;">',
' <div>',
' <span style="float: none" class="music-toal" id="music-num"></span>',
' <span style="float: none" class="video-toal" id="video-num"></span>',
' </div> ',
' </div> ',
' <div class="first_des">',
' {description}',
' </div>',
' </p>',
' </div>',
' <tpl else>',
' <img class="photo shadow" src="<tpl if="thumbnail == \'\'">/img/no_img.png <tpl else>{thumbnail}</tpl>" onerror="this.src= basicUrl + \'/img/no_img.png\';" width="60" height="60"/>',
' <div class="list-info">',
' <div class="podcast-name" title="{title}">{title:this.subcat}</div>',
' <tpl if="type == false">',
' <div class="music-box">',
' <span class="music-icon-unplayed"></span><span class="music-date">{datePublished:date("m.d.Y")} </span><span class="music-date">{duration}</span>',
' </div>',
' <tpl else>',
' <div class="video-box">',
' <span class="video-icon-grey"></span><span class="video-date">{datePublished:date("m.d.Y")}</span>',
' </div>',
' </tpl>',
' <div class="player"></div>',
' </div>',
' </tpl>',
'',
{
subcat: function(value) {
if(value.length > 40){
return value.slice(1,40)+"...";
}else{
return value;
}
}
}
),
store: 'EpisodesStore',
itemHeight: 90,
plugins: [
{
autoPaging: true,
type: 'listpaging'
}
]
}
]
}）;
答案 0 :(得分：0)
试试这个，让我知道结果。
config: {
tabBar: {
docked: 'bottom',
itemId: 'mytabbar',
style: 'background: #fff;border:none;',
layout: {
pack: 'center'
}
},
试试这个小提琴，可以吗？