* Bootstrap MenuItem class
* @cfg {String} html the menu label
* @cfg {String} href the link
- * @cfg {Boolean} preventDefault do not trigger A href on clicks.
+ * @cfg {Boolean} preventDefault do not trigger A href on clicks (default false).
* @cfg {Boolean} isContainer is it a container - just returns a drop down item..
* @cfg {Boolean} active used on sidebars to highlight active itesm
+ * @cfg {String} fa favicon to show on left of menu item.
+ * @cfg {Roo.bootsrap.Menu} menu the child menu.
*
*
* @constructor
href : false,
html : false,
- preventDefault: true,
+ preventDefault: false,
isContainer : false,
+ active : false,
+ fa: false,
getAutoCreate : function(){
if(this.isContainer){
return {
tag: 'li',
- cls: 'dropdown-menu-item'
+ cls: 'dropdown-menu-item '
};
}
+ var ctag = {
+ tag: 'span',
+ html: 'Link'
+ };
+
+ var anc = {
+ tag : 'a',
+ cls : 'dropdown-item',
+ href : '#',
+ cn : [ ]
+ };
+
+ if (this.fa !== false) {
+ anc.cn.push({
+ tag : 'i',
+ cls : 'fa fa-' + this.fa
+ });
+ }
+
+ anc.cn.push(ctag);
+
var cfg= {
tag: 'li',
cls: 'dropdown-menu-item',
- cn: [
- {
- tag : 'a',
- href : '#',
- html : 'Link'
- }
- ]
+ cn: [ anc ]
};
if (this.parent().type == 'treeview') {
cfg.cls = 'treeview-menu';
- cfg.cn[0].href = this.href || cfg.cn[0].href ;
- cfg.cn[0].html = this.html || cfg.cn[0].html ;
+ anc.href = this.href || cfg.cn[0].href ;
+ ctag.html = this.html || cfg.cn[0].html ;
return cfg;
},
- initEvents: function() {
+ initEvents: function()
+ {
if (this.parent().type == 'treeview') {
this.el.select('a').on('click', this.onClick, this);
}
+ if (this.menu) {
+ this.menu.parentType = this.xtype;
+ this.menu.triggerEl = this.el;
+ this.menu = this.addxtype(Roo.apply({}, this.menu));
+ }
+
},
onClick : function(e)
{
Roo.log('item on click ');
- //if(this.preventDefault){
- // e.preventDefault();
- //}
+
+ if(this.preventDefault){
+ e.preventDefault();
+ }
//this.parent().hideMenuItems();
this.fireEvent('click', this, e);
getEl : function()
{
return this.el;
- }
+ }
});