0
我想要制作的第一个应用程序的结构已基本完成。一个小问题对我来说很难解决。我使用分机。列表中带有onitemdisclosure功能，用于在按列表中的项目时显示一些详细信息。我需要一个后退按钮，所以我将它添加到相应选项卡的工具栏中。[SENCHA]隐藏主面板上的按钮
我无法弄清楚如何仅在细节窗格处于活动状态时才显示它。在Sencha论坛上，在StackoverFlow，Google上搜索，但似乎无法自行解决。
这是我的代码：
Ext.ns('ShotjesApp');
Ext.setup({
onReady: function() {
ShotjesApp.Main.init();
}
});
Ext.regModel('Contact', {
fields: ['Naam', 'Basis', 'Inhoud']
});
ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'Naam',
getGroupString : function(record) {
return record.get('Naam')[0];
},
data: [
{ Naam: "Domino", Basis: "Derval", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Elektra", Basis: "King", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Fiona", Basis: "Volpe", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Holly", Basis: "Goodhead", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Honey", Basis: "Rider", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Jill", Basis: "Masterton", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Kissy", Basis: "Suzuki", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Mary", Basis: "Goodnight", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Miranda", Basis: "Frost", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Molly", Basis: "Warmflash", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Paula", Basis: "Caplan", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Penelope", Basis: "Smallbone", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Plenty", Basis: "O'Toole", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Pussy", Basis: "Galore", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Strawberry", Basis: "Fields", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Sylvia", Basis: "Trench", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3"},
{ Naam: "Tatiana", Basis: "Romanova", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
{ Naam: "Tilly", Basis: "Masterton", Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
]
});
ShotjesApp.listPanel = new Ext.List ({
store: ListStore,
id: 'listpanel',
layout: 'fit',
itemTpl: '<div><p><strong>{Naam}</strong></div>',
onItemDisclosure: function(record) {
var naam = record.data.Naam;
ShotjesApp.detailPanel.update(record.data);
ShotjesApp.listContainer.setActiveItem(ShotjesApp.detailPanel, {type:'slide', direction:'left'});
ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);
}
});
ShotjesApp.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
layout: 'auto',
});
ShotjesApp.listContainer = new Ext.Container ({
layout: 'card',
items: [ShotjesApp.listPanel, ShotjesApp.detailPanel] ,
})
ShotjesApp.mainToolbar = new Ext.TabPanel ({
flex: 1,
xtype: 'tabpanel',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
ui: 'dark',
cardSwitchAnimation: {
type: 'fade',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
layout: 'vbox',
title: 'Home',
iconCls: 'mail',
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
scroll: {
direction: 'horizontal',
scrollbars: false
},
items: [{
text: 'terug',
ui: 'back',
handler: function() {
ShotjesApp.listContainer.setActiveItem('listpanel', {type:'slide', direction:'right'});
}
}]
}],
items: ShotjesApp.listContainer
}, {
title: 'tab2',
iconCls: 'bookmarks',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
},
}]
}, {
title: 'tab3',
iconCls: 'bookmarks',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
},
}]
}]
})
ShotjesApp.Main = {
init : function() {
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: ShotjesApp.mainToolbar
});
}
};