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

   1 /*
   2  * - LGPL
   3  *
   4  * sidebar item
   5  *
   6  *  li
   7  *    <span> icon </span>
   8  *    <span> text </span>
   9  *    <span>badge </span>
  10  */
  11
  12 /**
  13  * @class Roo.bootstrap.NavSidebarItem
  14  * @extends Roo.bootstrap.NavItem
  15  * Bootstrap Navbar.NavSidebarItem class
  16  * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
  17  * @constructor
  18  * Create a new Navbar Button
  19  * @param {Object} config The config object
  20  */
  21 Roo.bootstrap.NavSidebarItem = function(config){
  22     Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
  23     this.addEvents({
  24         // raw events
  25         /**
  26          * @event click
  27          * The raw click event for the entire grid.
  28          * @param {Roo.EventObject} e
  29          */
  30         "click" : true,
  31          /**
  32             * @event changed
  33             * Fires when the active item active state changes
  34             * @param {Roo.bootstrap.NavSidebarItem} this
  35             * @param {boolean} state the new state
  36
  37          */
  38         'changed': true
  39     });
  40
  41 };
  42
  43 Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
  44
  45     badgeWeight : 'default',
  46
  47     getAutoCreate : function(){
  48
  49
  50         var a = {
  51                 tag: 'a',
  52                 href : this.href || '#',
  53                 cls: '',
  54                 html : '',
  55                 cn : []
  56         };
  57         var cfg = {
  58             tag: 'li',
  59             cls: '',
  60             cn: [ a ]
  61         }
  62         var span = {
  63             tag: 'span',
  64             html : this.html || ''
  65         }
  66
  67
  68         if (this.active) {
  69             cfg.cls += ' active';
  70         }
  71
  72         if (this.disabled) {
  73             cfg.cls += ' disabled';
  74         }
  75
  76         // left icon..
  77         if (this.glyphicon || this.icon) {
  78             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
  79             a.cn.push({ tag : 'i', cls : c }) ;
  80         }
  81         // html..
  82         a.cn.push(span);
  83         // then badge..
  84         if (this.badge !== '') {
  85
  86             a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
  87         }
  88         // fi
  89         if (this.menu) {
  90             a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
  91             a.cls += 'dropdown-toggle treeview' ;
  92
  93         }
  94
  95
  96
  97         return cfg;
  98
  99
 100     },
 101
 102     initEvents : function()
 103     {
 104         this.el.on('click', this.onClick, this);
 105         Roo.log("set badgeEl? ", this.badge);
 106
 107         if(this.badge !== ''){
 108             Roo.log("set badgeEl");
 109             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
 110         }
 111
 112     },
 113
 114     onClick : function(e)
 115     {
 116         if(this.disabled){
 117             e.preventDefault();
 118             return;
 119         }
 120
 121         if(this.preventDefault){
 122             e.preventDefault();
 123         }
 124
 125         this.fireEvent('click', this);
 126     },
 127
 128     disable : function()
 129     {
 130         this.setDisabled(true);
 131     },
 132
 133     enable : function()
 134     {
 135         this.setDisabled(false);
 136     },
 137
 138     setDisabled : function(state)
 139     {
 140         if(this.disabled == state){
 141             return;
 142         }
 143
 144         this.disabled = state;
 145
 146         if (state) {
 147             this.el.addClass('disabled');
 148             return;
 149         }
 150
 151         this.el.removeClass('disabled');
 152
 153         return;
 154     },
 155
 156     setActive : function(state)
 157     {
 158         if(this.active == state){
 159             return;
 160         }
 161
 162         this.active = state;
 163
 164         if (state) {
 165             this.el.addClass('active');
 166             return;
 167         }
 168
 169         this.el.removeClass('active');
 170
 171         return;
 172     },
 173
 174     isActive: function ()
 175     {
 176         return this.active;
 177     },
 178
 179     setBadge : function(str)
 180     {
 181         if(!this.badgeEl){
 182             return;
 183         }
 184
 185         this.badgeEl.dom.innerHTML = str;
 186     }
 187
 188
 189
 190
 191 });
 192
 193
 194