PDA

View Full Version : Insert panel between toolbar and NestedList for Parent Items



pensive612
29 Apr 2011, 1:38 PM
Hi Guys,

Another Sencha noob here. Thanks for everything so far. The documentation and forums have gotten me farther than I ever thought I would get.

However, this one I can't seem to get past:

I've been building an app where the frontpage is a nestedList. However, I want to insert a logo Panel below the Toolbar and above the actual list items.

It would need to disappear after any x-list-item is selected. Thus, only appearing on the top level of the nest List.

I've tried several things, and there always seems to be one thing that prevents me.

Can anyone advise me on how they might approach it?

Thanks so much in advance.

Adam.



// Menu Pages
var menu = new Ext.NestedList({
fullscreen: true,
title: 'Menu',
displayField: 'text',
store: menu_store,
id: 'itemList',
toolbar: {
id: 'itemToolbar'
},

// Add Panel for Leaf nodes
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
cls: 'menu-item-panel',
styleHtmlContent : true,
tpl: menuTemplate,
// add button to Leaf Node
listeners: {
activate: function() {
Ext.getCmp('itemToolbar').setTitle('Yoohoo');
}
}
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
},
// add template for all nodes
getItemTextTpl: function() {
var tplConstructor =

// I also tried this to give an optional class, however, I can only access it inside x-list-item, which like many other people have mentioned, prevents us from styling the parent container.

'<tpl if="xindex === 1 && leaf == false"><div class=\'front-logo-list\'></tpl>' +
'<tpl if="frontImage">' +
'<img class="front-image" src="resources/images/{frontImage}" alt="Baja Fresh!"' +
'</tpl>' +
'<tpl if="newItem">' +
'<span class="list-new-item">New&nbsp;Item!</span>' +
'</tpl>'+
'{text}' +
'<tpl>'+
'<div class="metadata">' +
'{description:ellipsis(40)}' +
'</div>' +
'</tpl>' +
'<tpl if="xindex === 1 && leaf == false"></div></tpl>'
;
return tplConstructor;
}
});