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

   1  /**
   2  * @class Roo.bootstrap.menu.Item
   3  * @extends Roo.bootstrap.Component
   4  * @licence LGPL
   5  * Bootstrap MenuItem class
   6  * @cfg {Boolean} submenu default false -
   7  * @cfg {String} html text of the item
   8  * @cfg {String} href the link
   9  * @cfg {Boolean} disabled  is the item disabled - default false
  10  * @cfg {Boolean} preventDefault stop trigger click event to parent elements - default true
  11  * @cfg {String} fa  Font awesome icon
  12  * @cfg {String} pos (left|right) Submenu align to  default right
  13  * @cfg {Roo.bootsrap.Menu} menu the child menu.
  14
  15  *
  16  * @constructor
  17  * Create a new Menu  Item
  18  * @param {Object} config The config object
  19  */
  20
  21
  22 Roo.bootstrap.menu.Item = function(config){
  23     Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
  24     this.addEvents({
  25         /**
  26          * @event mouseover
  27          * Fires when the mouse is hovering over this menu
  28          * @param {Roo.bootstrap.menu.Item} this
  29          * @param {Roo.EventObject} e
  30          */
  31         mouseover : true,
  32         /**
  33          * @event mouseout
  34          * Fires when the mouse exits this menu
  35          * @param {Roo.bootstrap.menu.Item} this
  36          * @param {Roo.EventObject} e
  37          */
  38         mouseout : true,
  39         // raw events
  40         /**
  41          * @event click
  42          * The raw click event for the entire grid.
  43          * @param {Roo.EventObject} e
  44          */
  45         click : true
  46     });
  47 };
  48
  49 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
  50
  51     submenu : false,
  52     href : '',
  53     html : '',
  54     preventDefault: true,
  55     disable : false,
  56     active : false,
  57     fa : false,
  58     pos : 'right',
  59
  60     isContainer : false, // ?? only a <li drowdonw-menu-item">
  61
  62     getAutoCreate : function()
  63     {
  64
  65         if(this.isContainer){
  66             return {
  67                 tag: 'li',
  68                 cls: 'dropdown-menu-item '
  69             };
  70         }
  71
  72         var ctag = {
  73             tag: 'span',
  74             cls : 'roo-menu-item-text',
  75             html : this.html
  76         };
  77
  78         var anc = {
  79             tag : 'a',
  80             cls : 'dropdown-item',
  81             href : this.href || '#',
  82             cn : [  ]
  83         };
  84
  85         if (this.fa !== false) {
  86             anc.cn.push({
  87                 tag : 'i',
  88                 cls : 'fa fa-' + this.fa
  89             });
  90         }
  91
  92         anc.cn.push(ctag);
  93
  94
  95         var cfg= {
  96             tag: 'li',
  97             cls: 'dropdown-menu-item',
  98             cn: [ anc ]
  99         };
 100         if (this.parent().type == 'treeview') {
 101             cfg.cls = 'treeview-menu';
 102         }
 103         if (this.active) {
 104             cfg.cls += ' active';
 105         }
 106
 107         if(this.disabled){
 108             cfg.cls +=  ' disabled'
 109         }
 110
 111         if(this.submenu){
 112             cfg.cls +=  'dropdown-submenu';
 113
 114             if(this.pos == 'left'){
 115                 cfg.cls +=  ' pull-left';
 116             }
 117         }
 118         anc.href = this.href || cfg.cn[0].href ;
 119         ctag.html = this.html || cfg.cn[0].html ;
 120         return cfg;
 121
 122
 123     },
 124
 125     initEvents : function()
 126     {
 127         if (this.parent().type == 'treeview') {
 128             this.el.select('a').on('click', this.onClick, this);
 129         }
 130         if (this.menu) {
 131             this.menu.parentType = this.xtype;
 132             this.menu.triggerEl = this.el;
 133             this.menu = this.addxtype(Roo.apply({}, this.menu));
 134         }
 135         this.el.on('mouseover', this.onMouseOver, this);
 136         this.el.on('mouseout', this.onMouseOut, this);
 137
 138         this.el.select('a', true).first().on('click', this.onClick, this);
 139
 140     },
 141
 142     onClick : function(e)
 143     {
 144         if(this.preventDefault){
 145             e.preventDefault();
 146         }
 147
 148         this.fireEvent("click", this, e);
 149     },
 150
 151     onMouseOver : function(e)
 152     {
 153         if(this.submenu && this.pos == 'left'){
 154             this.el.select('ul.dropdown-menu', true).first().setLeft(this.el.select('ul.dropdown-menu', true).first().getWidth() * -1);
 155         }
 156
 157         this.fireEvent("mouseover", this, e);
 158     },
 159
 160     onMouseOut : function(e)
 161     {
 162         this.fireEvent("mouseout", this, e);
 163     }
 164 });
 165
 166
 167
 168