-/*
- * To change this template, choose Tools | Templates
- * and open the template in the editor.
+ /**
+ * @class Roo.bootstrap.menu.Item
+ * @extends Roo.bootstrap.Component
+ * @licence LGPL
+ * Bootstrap MenuItem class
+ * @cfg {Boolean} submenu default false -
+ * @cfg {String} html text of the item
+ * @cfg {String} href the link
+ * @cfg {Boolean} disabled is the item disabled - default false
+ * @cfg {Boolean} preventDefault stop trigger click event to parent elements - default true
+ * @cfg {String} fa Font awesome icon
+ * @cfg {String} pos (left|right) Submenu align to default right
+ * @cfg {Roo.bootsrap.Menu} menu the child menu.
+
+ *
+ * @constructor
+ * Create a new Menu 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,
+ active : false,
+ fa : false,
+ pos : 'right',
+
+ isContainer : false, // ?? only a <li drowdonw-menu-item">
+
+ getAutoCreate : function()
+ {
+
+ if(this.isContainer){
+ return {
+ tag: 'li',
+ cls: 'dropdown-menu-item '
+ };
+ }
+
+ var ctag = {
+ tag: 'span',
+ cls : 'roo-menu-item-text',
+ html : this.html
+ };
+
+ var anc = {
+ tag : 'a',
+ cls : 'dropdown-item',
+ href : this.href || '#',
+ cn : [ ]
+ };
+
+ if (this.fa !== false) {
+ anc.cn.push({
+ tag : 'i',
+ cls : 'fa fa-' + this.fa
+ });
+ }
+
+ anc.cn.push(ctag);
+
+
+ var cfg= {
+ tag: 'li',
+ cls: 'dropdown-menu-item',
+ cn: [ anc ]
+ };
+ if (this.parent().type == 'treeview') {
+ cfg.cls = 'treeview-menu';
+ }
+ if (this.active) {
+ cfg.cls += ' active';
+ }
+
+ if(this.disabled){
+ cfg.cls += ' disabled'
+ }
+
+ if(this.submenu){
+ cfg.cls += 'dropdown-submenu';
+
+ if(this.pos == 'left'){
+ cfg.cls += ' pull-left';
+ }
+ }
+ anc.href = this.href || cfg.cn[0].href ;
+ ctag.html = this.html || cfg.cn[0].html ;
+ return cfg;
+
+
+ },
+
+ initEvents : function()
+ {
+ if (this.parent().type == 'treeview') {
+ this.el.select('a').on('click', this.onClick, this);
+ }
+ if (this.menu) {
+ this.menu.parentType = this.xtype;
+ this.menu.triggerEl = this.el;
+ this.menu = this.addxtype(Roo.apply({}, this.menu));
+ }
+ 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);
+ }
+});
+
+
+
+
\ No newline at end of file
projects / roojs1 / blobdiff