Menu Item Templates... Help, please

[zhegwood]

I know it can be done and I've done it before but I can't find an example of it anywhere...

Anyone have an example where a template has been applied to menu items?

Here's what I have that isn't working:


new Ext.menu.Menu({
floating:false,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<div style="float:left"><img src="{icon}" width="32" height="32" /></div>',
'<div style="float:left">',
'<div style="font-size:11px;font-weight:bold;">{text}</div>',
'<div style="">{subtext}</div>',
'</div>',
'</div>',
'<tpl for="children">',
'<div>',
'<div style="float:left"><img src="{icon}" width="16" height="16" /></div>',
'<div style="float:left">',
'<div style="font-size:11px;font-weight:bold;">{text}</div>',
'</div>',
'</div>',
'</tpl>',
'</tpl>'
),
items: this.getMenuItems()
});

getMenuItems: function() {
menuJson = [
{ icon:'images/icon.gif', text:'Heading Text', subtext:'subheading text', link:'http:www.extjs.com', children: [
{ icon:'images/subicon1.gif', text:'Sub 1', link:'' },
{ icon:'images/subicon2.gif', text:'Sub2', link:'' },
{ icon:'images/subicon3.gif', text:'Sub 3', link:'' },
{ icon:'images/subicon4.gif', text:'Sub4', link:'' },
]
}
return menuJson;
}

[Animal]

What are you wanting?

You are using undocumented features (well done on reading source code) in a completely wrong way.

itemTpl is used by the Menu's layout manager Ext.layout.MenuLayout

If you want a Menu layed out differently, use a different layout config.

[zhegwood]

What are you wanting?

You are using undocumented features (well done on reading source code) in a completely wrong way.

itemTpl is used by the Menu's layout manager Ext.layout.MenuLayout

If you want a Menu layed out differently, use a different layout config.

Basically, I just want to control what the menu items look like. I could have sworn I'd done this before, but maybe it was with tree nodes and not menu items. Hmm. I'll look into it a bit more though. Thanks.

[zhegwood]

Got something working! Looks like crap right now because I haven't done any styling. Seems there's a better way though... :-?



//define the templates
this.itemTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="height:40px;">',
'<div style="float:left"><img src="{icon}" width="32" height="32" /></div>',
'<div style="float:left">',
'<div style="font-size:11px;font-weight:bold;">{text}</div>',
'<div style="font-size:10px;">{subtext}</div>',
'</div>',
'<div style="clear:both;"></div>',
'</div>',
'</tpl>'
);
this.itemTpl.compile();

this.childTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<div style="float:left"><img src="{icon}" width="16" height="16" /></div>',
'<div style="float:left">',
'<div style="font-size:11px;font-weight:bold;">{text}</div>',
'</div>',
'<div style="clear:both;"></div>',
'</div>',
'</tpl>'
);
this.childTpl.compile();

//the menu (simplified):
new Ext.menu.Menu({
floating:false,
items: this.getMenuItems()
});

//this.getMenuItems() returns the following data:
[
{ icon: '', text: "Main Text", subtext: 'Sub Text', link: '', itemTpl: this.itemTpl, menu: {
items: [
{ icon: '', text: 'Child Text', link: '', itemTpl: this.childTpl },
{ icon: '', text: 'Child Text', link: '', itemTpl: this.childTpl },
{ icon: '', text: 'Child Text', link: '', itemTpl: this.childTpl },
{ icon: '', text: 'Child Text', link: '', itemTpl: this.childTpl }
]
}
}]