sync

[roojs1] / Roo / bootstrap / menu / Item.js

diff --git a/Roo/bootstrap/menu/Item.js b/Roo/bootstrap/menu/Item.js
index 5978a83..c8a2aad 100644 (file)
--- a/Roo/bootstrap/menu/Item.js
+++ b/Roo/bootstrap/menu/Item.js
@@ -1,23 +1,20 @@
-/*
- * - LGPL
- *
- * menu item
- * 
- */
-Roo.bootstrap.menu = Roo.bootstrap.menu || {};
-
-/**
+ /**
  * @class Roo.bootstrap.menu.Item
  * @extends Roo.bootstrap.Component
+ * @licence LGPL
  * Bootstrap MenuItem class
- * @cfg {Boolean} submenu (true | false) default false
+ * @cfg {Boolean} submenu default false - 
  * @cfg {String} html text of the item
  * @cfg {String} href the link
- * @cfg {Boolean} preventDefault (true | false) default true
- * 
+ * @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 Item
+ * Create a new Menu  Item
  * @param {Object} config The config object
  */
 
@@ -55,26 +52,86 @@ Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
     href : '',
     html : '',
     preventDefault: true,
+    disable : false,
+    active : false,    
+    fa : false,
+    pos : 'right',
+    
+    isContainer : false, // ?? only a <li drowdonw-menu-item">
     
     getAutoCreate : function()
     {
-        var cfg = {
-            tag : 'li',
-            cls : (this.submenu) ? 'dropdown-submenu' : '',
-            cn : [
-                {
-                    tag : 'a',
-                    href : this.href || '#',
-                    html : this.html
-                }
-            ]
+        
+        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);
         
@@ -84,11 +141,19 @@ Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
     
     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);
     },