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 (default false).
  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: false,
  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             cls : 'dropdown-item',
  67             href : '#',
  68             cn : [  ]
  69         };
  70
  71         if (this.fa !== false) {
  72             anc.cn.push({
  73                 tag : 'i',
  74                 cls : 'fa fa-' + this.fa
  75             });
  76         }
  77
  78         anc.cn.push(ctag);
  79
  80
  81         var cfg= {
  82             tag: 'li',
  83             cls: 'dropdown-menu-item',
  84             cn: [ anc ]
  85         };
  86         if (this.parent().type == 'treeview') {
  87             cfg.cls = 'treeview-menu';
  88         }
  89         if (this.active) {
  90             cfg.cls += ' active';
  91         }
  92
  93
  94
  95         anc.href = this.href || cfg.cn[0].href ;
  96         ctag.html = this.html || cfg.cn[0].html ;
  97         return cfg;
  98     },
  99
 100     initEvents: function()
 101     {
 102         if (this.parent().type == 'treeview') {
 103             this.el.select('a').on('click', this.onClick, this);
 104         }
 105
 106         if (this.menu) {
 107             this.menu.parentType = this.xtype;
 108             this.menu.triggerEl = this.el;
 109             this.menu = this.addxtype(Roo.apply({}, this.menu));
 110         }
 111
 112     },
 113     onClick : function(e)
 114     {
 115         Roo.log('item on click ');
 116
 117         if(this.preventDefault){
 118             e.preventDefault();
 119         }
 120         //this.parent().hideMenuItems();
 121
 122         this.fireEvent('click', this, e);
 123     },
 124     getEl : function()
 125     {
 126         return this.el;
 127     }
 128 });
 129
 130
 131
 132