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
});
}
};