Roo/bootstrap/menu/Item.js

/*
 * - LGPL
 *
 * menu item
 * 
 */
Roo.bootstrap.menu = Roo.bootstrap.menu || {};

/**
 * @class Roo.bootstrap.menu.Item
 * @extends Roo.bootstrap.Component
 * Bootstrap MenuItem class
 * @cfg {Boolean} submenu (true | false) default false
 * @cfg {String} html text of the item
 * @cfg {String} href the link
 * @cfg {Boolean} disable (true | false) default false
 * @cfg {Boolean} preventDefault (true | false) default true
 * @cfg {String} icon Font awesome icon
 * @cfg {String} pos Submenu align to (left | right) default right 
 * 
 * 
 * @constructor
 * Create a new Item
 * @param {Object} config The config object
 */


Roo.bootstrap.menu.Item = function(config){
    Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
    this.addEvents({
        /**
         * @event mouseover
         * Fires when the mouse is hovering over this menu
         * @param {Roo.bootstrap.menu.Item} this
         * @param {Roo.EventObject} e
         */
        mouseover : true,
        /**
         * @event mouseout
         * Fires when the mouse exits this menu
         * @param {Roo.bootstrap.menu.Item} this
         * @param {Roo.EventObject} e
         */
        mouseout : true,
        // raw events
        /**
         * @event click
         * The raw click event for the entire grid.
         * @param {Roo.EventObject} e
         */
        click : true
    });
};

Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {

    submenu : false,
    href : '',
    html : '',
    preventDefault: true,
    disable : false,
    icon : false,
    pos : 'right',

    getAutoCreate : function()
    {
        var text = [
            {
                tag : 'span',
                cls : 'roo-menu-item-text',
                html : this.html
            }
        ];

        if(this.icon){
            text.unshift({
                tag : 'i',
                cls : 'fa ' + this.icon
            })
        }

        var cfg = {
            tag : 'li',
            cn : [
                {
                    tag : 'a',
                    href : this.href || '#',
                    cn : text
                }
            ]
        };

        if(this.disable){
            cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'disabled' : (cfg.cls + ' disabled');
        }

        if(this.submenu){
            cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'dropdown-submenu' : (cfg.cls + ' dropdown-submenu');

            if(this.pos == 'left'){
                cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'pull-left' : (cfg.cls + ' pull-left');
            }
        }

        return cfg;
    },

    initEvents : function()
    {
        this.el.on('mouseover', this.onMouseOver, this);
        this.el.on('mouseout', this.onMouseOut, this);

        this.el.select('a', true).first().on('click', this.onClick, this);

    },

    onClick : function(e)
    {
        if(this.preventDefault){
            e.preventDefault();
        }

        this.fireEvent("click", this, e);
    },

    onMouseOver : function(e)
    {
        if(this.submenu && this.pos == 'left'){
            this.el.select('ul.dropdown-menu', true).first().setLeft(this.el.select('ul.dropdown-menu', true).first().getWidth() * -1);
        }

        this.fireEvent("mouseover", this, e);
    },

    onMouseOut : function(e)
    {
        this.fireEvent("mouseout", this, e);
    }
});