git.roojs.org Git - roojs1/blob - Roo/bootstrap/MenuItem.js

   1 /*
   2  * - LGPL
   3  *
   4  * menu item
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.MenuItem
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap MenuItem class
  13  * @cfg {String} html the menu label
  14  * @cfg {String} href the link
  15  * @cfg {Boolean} preventDefault do not trigger A href on clicks.
  16  * @cfg {Boolean} isContainer is it a container - just returns a drop down item..
  17  * @cfg {Boolean} active  used on sidebars to highlight active itesm
  18  * @cfg {String} fa favicon to show on left of menu item.
  19  * @cfg {Roo.bootsrap.Menu} menu the child menu.
  20  *
  21  *
  22  * @constructor
  23  * Create a new MenuItem
  24  * @param {Object} config The config object
  25  */
  26
  27
  28 Roo.bootstrap.MenuItem = function(config){
  29     Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
  30     this.addEvents({
  31         // raw events
  32         /**
  33          * @event click
  34          * The raw click event for the entire grid.
  35          * @param {Roo.bootstrap.MenuItem} this
  36          * @param {Roo.EventObject} e
  37          */
  38         "click" : true
  39     });
  40 };
  41
  42 Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
  43
  44     href : false,
  45     html : false,
  46     preventDefault: true,
  47     isContainer : false,
  48     active : false,
  49     fa: false,
  50
  51     getAutoCreate : function(){
  52
  53         if(this.isContainer){
  54             return {
  55                 tag: 'li',
  56                 cls: 'dropdown-menu-item'
  57             };
  58         }
  59         var ctag = {
  60             tag: 'span',
  61             html: 'Link'
  62         };
  63
  64         var anc = {
  65             tag : 'a',
  66             href : '#',
  67             cn : [  ]
  68         };
  69
  70         if (this.fa !== false) {
  71             anc.cn.push({
  72                 tag : 'i',
  73                 cls : 'fa fa-' + this.fa
  74             });
  75         }
  76
  77         anc.cn.push(ctag);
  78
  79
  80         var cfg= {
  81             tag: 'li',
  82             cls: 'dropdown-menu-item',
  83             cn: [ anc ]
  84         };
  85         if (this.parent().type == 'treeview') {
  86             cfg.cls = 'treeview-menu';
  87         }
  88         if (this.active) {
  89             cfg.cls += ' active';
  90         }
  91
  92
  93
  94         anc.href = this.href || cfg.cn[0].href ;
  95         ctag.html = this.html || cfg.cn[0].html ;
  96         return cfg;
  97     },
  98
  99     initEvents: function()
 100     {
 101         if (this.parent().type == 'treeview') {
 102             this.el.select('a').on('click', this.onClick, this);
 103         }
 104         if (this.menu) {
 105             this.menu.parentType = this.xtype;
 106             this.menu.triggerEl = this.el;
 107             this.menu = this.addxtype(Roo.apply({}, this.menu));
 108         }
 109
 110     },
 111     onClick : function(e)
 112     {
 113         Roo.log('item on click ');
 114         //if(this.preventDefault){
 115         //    e.preventDefault();
 116         //}
 117         //this.parent().hideMenuItems();
 118
 119         this.fireEvent('click', this, e);
 120     },
 121     getEl : function()
 122     {
 123         return this.el;
 124     }
 125 });
 126
 127
 128
 129