PDA

View Full Version : Hide backbutton on the main-panel



Dannydekr
21 Aug 2011, 12:31 PM
For my first app, which will have one tab with an ext.list and one tab with some simple HTML.

I need a back button and a title on the details pane of the ext.list items. The structure I use only has one toolbar on the corresponding Tab. When I add the toolbars separately, which will be the most easy solution, I will get problems (tab bar won't horizontally stretch on the details pane and won't show on the ext. list).

So I hope there is a solution to add stuff on a single toolbar, according to the active panel.
(something like "if details pane is active, show title and back button)

I can't find how to do this, so I ask for help on the matter.

This is my code:



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" },
]
});




// my list
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
});
}
};




As you can see, for now I show the back button all the time. Also, no title yet, although I did put some functionality in the details pane which would fetch the title.