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

   1 /*
   2  * - LGPL
   3  *
   4  * menu item
   5  *
   6  */
   7 Roo.bootstrap.menu = Roo.bootstrap.menu || {};
   8
   9 /**
  10  * @class Roo.bootstrap.menu.Item
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap MenuItem class
  13  * @cfg {Boolean} submenu (true | false) default false
  14  * @cfg {String} html text of the item
  15  * @cfg {String} href the link
  16  * @cfg {Boolean} disable (true | false) default false
  17  * @cfg {Boolean} preventDefault (true | false) default true
  18  *
  19  *
  20  * @constructor
  21  * Create a new Item
  22  * @param {Object} config The config object
  23  */
  24
  25
  26 Roo.bootstrap.menu.Item = function(config){
  27     Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
  28     this.addEvents({
  29         /**
  30          * @event mouseover
  31          * Fires when the mouse is hovering over this menu
  32          * @param {Roo.bootstrap.menu.Item} this
  33          * @param {Roo.EventObject} e
  34          */
  35         mouseover : true,
  36         /**
  37          * @event mouseout
  38          * Fires when the mouse exits this menu
  39          * @param {Roo.bootstrap.menu.Item} this
  40          * @param {Roo.EventObject} e
  41          */
  42         mouseout : true,
  43         // raw events
  44         /**
  45          * @event click
  46          * The raw click event for the entire grid.
  47          * @param {Roo.EventObject} e
  48          */
  49         click : true
  50     });
  51 };
  52
  53 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
  54
  55     submenu : false,
  56     href : '',
  57     html : '',
  58     preventDefault: true,
  59     disable : false,
  60
  61     getAutoCreate : function()
  62     {
  63         var text = [
  64             {
  65                 tag : 'span',
  66                 cls : 'roo-menu-item-text',
  67                 html : this.html
  68             }
  69         ];
  70
  71         if(this.icon){
  72             text.unshift({
  73                 tag : 'i',
  74                 cls : 'fa ' + this.icon
  75             })
  76         }
  77
  78         var cfg = {
  79             tag : 'li',
  80             cn : [
  81                 {
  82                     tag : 'a',
  83                     href : this.href || '#',
  84                     html : this.html
  85                 }
  86             ]
  87         };
  88
  89         if(this.disable){
  90             cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'disabled' : (cfg.cls + ' disabled');
  91         }
  92
  93         if(this.submenu){
  94             cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'dropdown-submenu' : (cfg.cls + ' dropdown-submenu');
  95         }
  96
  97         return cfg;
  98     },
  99
 100     initEvents : function()
 101     {
 102         this.el.on('mouseover', this.onMouseOver, this);
 103         this.el.on('mouseout', this.onMouseOut, this);
 104
 105         this.el.select('a', true).first().on('click', this.onClick, this);
 106
 107     },
 108
 109     onClick : function(e)
 110     {
 111         if(this.preventDefault){
 112             e.preventDefault();
 113         }
 114
 115         this.fireEvent("click", this, e);
 116     },
 117
 118     onMouseOver : function(e)
 119     {
 120         this.fireEvent("mouseover", this, e);
 121     },
 122
 123     onMouseOut : function(e)
 124     {
 125         this.fireEvent("mouseout", this, e);
 126     }
 127 });
 128
 129
 130
 131