Place item above nested list data but below it's toolbar

[tldes]

I have a tab panel layout that has a nested list as one of the tabs. That actually works great. I am however struggling with getting something like a logo or some intro text to show up before the list. Ideally I it would be between the toolbar and where the list begins. I have tried a lot of different things and unfortunately I've been staring at this code way too long. Here is my code for the nested list.

So, just to restate. I am looking for a layout of nest list toolbar, then an item (logo or text) then the list info I am pulling from my store.


MeaMobile.views.Maincard = Ext.extend(Ext.NestedList, { fullscreen: true,
title: "Browse",
iconCls: "star",
cls: 'mainMenu',
cardSwitchAnimation: 'slide',

initComponent: function() {
Ext.apply(this, {
store: MeaMobile.menustore,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
parentData = parent.attributes.record.data;
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
tpl: ["<h3>{text}</h3>"],
cls: 'pageH2'

});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
}
});
MeaMobile.views.Maincard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('maincard', MeaMobile.views.Maincard);

[mitchellsimoens]

Have you tried to add a docked item to the nestedlist?

[tldes]

I have but it doesn't solve my issue of the toolbar. Here is the revised code with the docked item. It places the docked item above the nested list toolbar. Is there a way to remove that toolbar for the root of the list but have it back for the sub navigation items?


MeaMobile.views.Maincard = Ext.extend(Ext.NestedList, {
fullscreen: true,
title: "Menu",
iconCls: "star",
cls: 'mainMenu',
cardSwitchAnimation: 'slide',
dockedItems: [{
dock: 'top',
items: [{
html: '<center><br /><img src="images/Mea-Logo-White.png" alt="McDonald Eye" /></center>',
}]
}],
initComponent: function() {
Ext.apply(this, {
store: MeaMobile.menustore,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
parentData = parent.attributes.record.data;
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,

tpl: ["<div class='pagebox'><h3>{text}</h3><div>{desc}</div></div>"],
cls: 'pageH2'
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
}
});
MeaMobile.views.Maincard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('maincard', MeaMobile.views.Maincard);