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  * @cfg {String} icon Font awesome icon
  19  * @cfg {String} pos Submenu align to (left | right) default right
  20  *
  21  *
  22  * @constructor
  23  * Create a new Item
  24  * @param {Object} config The config object
  25  */
  26
  27
  28 Roo.bootstrap.menu.Item = function(config){
  29     Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
  30     this.addEvents({
  31         /**
  32          * @event mouseover
  33          * Fires when the mouse is hovering over this menu
  34          * @param {Roo.bootstrap.menu.Item} this
  35          * @param {Roo.EventObject} e
  36          */
  37         mouseover : true,
  38         /**
  39          * @event mouseout
  40          * Fires when the mouse exits this menu
  41          * @param {Roo.bootstrap.menu.Item} this
  42          * @param {Roo.EventObject} e
  43          */
  44         mouseout : true,
  45         // raw events
  46         /**
  47          * @event click
  48          * The raw click event for the entire grid.
  49          * @param {Roo.EventObject} e
  50          */
  51         click : true
  52     });
  53 };
  54
  55 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
  56
  57     submenu : false,
  58     href : '',
  59     html : '',
  60     preventDefault: true,
  61     disable : false,
  62     icon : false,
  63     pos : 'right',
  64
  65     getAutoCreate : function()
  66     {
  67         var text = [
  68             {
  69                 tag : 'span',
  70                 cls : 'roo-menu-item-text',
  71                 html : this.html
  72             }
  73         ];
  74
  75         if(this.icon){
  76             text.unshift({
  77                 tag : 'i',
  78                 cls : 'fa ' + this.icon
  79             })
  80         }
  81
  82         var cfg = {
  83             tag : 'li',
  84             cn : [
  85                 {
  86                     tag : 'a',
  87                     href : this.href || '#',
  88                     cn : text
  89                 }
  90             ]
  91         };
  92
  93         if(this.disable){
  94             cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'disabled' : (cfg.cls + ' disabled');
  95         }
  96
  97         if(this.submenu){
  98             cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'dropdown-submenu' : (cfg.cls + ' dropdown-submenu');
  99
 100             if(this.pos == 'left'){
 101                 cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'pull-left' : (cfg.cls + ' pull-left');
 102             }
 103         }
 104
 105         return cfg;
 106     },
 107
 108     initEvents : function()
 109     {
 110         this.el.on('mouseover', this.onMouseOver, this);
 111         this.el.on('mouseout', this.onMouseOut, this);
 112
 113         this.el.select('a', true).first().on('click', this.onClick, this);
 114
 115     },
 116
 117     onClick : function(e)
 118     {
 119         if(this.preventDefault){
 120             e.preventDefault();
 121         }
 122
 123         this.fireEvent("click", this, e);
 124     },
 125
 126     onMouseOver : function(e)
 127     {
 128         if(this.submenu && this.pos == 'left'){
 129             this.el.select('ul.dropdown-menu', true).first().setLeft(this.el.select('ul.dropdown-menu', true).first().getWidth() * -1);
 130         }
 131
 132         this.fireEvent("mouseover", this, e);
 133     },
 134
 135     onMouseOut : function(e)
 136     {
 137         this.fireEvent("mouseout", this, e);
 138     }
 139 });
 140
 141
 142
 143