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  * {Boolean} open is the menu open
  18  * {Boolean} buttonView use button as the tigger el rather that a (default false)
  19  * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
  20  * {String} buttonSize (sm|md|lg)the extra classes for the button
  21  * @constructor
  22  * Create a new Navbar Button
  23  * @param {Object} config The config object
  24  */
  25 Roo.bootstrap.NavSidebarItem = function(config){
  26     Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
  27     this.addEvents({
  28         // raw events
  29         /**
  30          * @event click
  31          * The raw click event for the entire grid.
  32          * @param {Roo.EventObject} e
  33          */
  34         "click" : true,
  35          /**
  36             * @event changed
  37             * Fires when the active item active state changes
  38             * @param {Roo.bootstrap.NavSidebarItem} this
  39             * @param {boolean} state the new state
  40
  41          */
  42         'changed': true
  43     });
  44
  45 };
  46
  47 Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
  48
  49     badgeWeight : 'default',
  50
  51     open: false,
  52
  53     buttonView : false,
  54
  55     buttonWeight : 'default',
  56
  57     buttonSize : 'md',
  58
  59     getAutoCreate : function(){
  60
  61
  62         var a = {
  63                 tag: 'a',
  64                 href : this.href || '#',
  65                 cls: '',
  66                 html : '',
  67                 cn : []
  68         };
  69
  70         if(this.buttonView){
  71             a = {
  72                 tag: 'button',
  73                 href : this.href || '#',
  74                 cls: 'btn btn-' + this.buttonWeight,
  75                 html : '',
  76                 cn : []
  77         };
  78         }
  79
  80         var cfg = {
  81             tag: 'li',
  82             cls: '',
  83             cn: [ a ]
  84         };
  85         var span = {
  86             tag: 'span',
  87             html : this.html || ''
  88         };
  89
  90
  91         if (this.active) {
  92             cfg.cls += ' active';
  93         }
  94
  95         if (this.disabled) {
  96             cfg.cls += ' disabled';
  97         }
  98         if (this.open) {
  99             cfg.cls += ' open x-open';
 100         }
 101         // left icon..
 102         if (this.glyphicon || this.icon) {
 103             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
 104             a.cn.push({ tag : 'i', cls : c }) ;
 105         }
 106         // html..
 107         a.cn.push(span);
 108         // then badge..
 109         if (this.badge !== '') {
 110
 111             a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
 112         }
 113         // fi
 114         if (this.menu) {
 115             a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
 116             a.cls += 'dropdown-toggle treeview' ;
 117         }
 118
 119         return cfg;
 120
 121
 122     },
 123
 124     initEvents : function()
 125     {
 126         if (typeof (this.menu) != 'undefined') {
 127             this.menu.parentType = this.xtype;
 128             this.menu.triggerEl = this.el;
 129             this.menu = this.addxtype(Roo.apply({}, this.menu));
 130         }
 131
 132         this.el.on('click', this.onClick, this);
 133
 134         if(this.badge !== ''){
 135
 136             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
 137         }
 138
 139     },
 140
 141     onClick : function(e)
 142     {
 143         if(this.disabled){
 144             e.preventDefault();
 145             return;
 146         }
 147
 148         if(this.preventDefault){
 149             e.preventDefault();
 150         }
 151
 152         this.fireEvent('click', this);
 153     },
 154
 155     disable : function()
 156     {
 157         this.setDisabled(true);
 158     },
 159
 160     enable : function()
 161     {
 162         this.setDisabled(false);
 163     },
 164
 165     setDisabled : function(state)
 166     {
 167         if(this.disabled == state){
 168             return;
 169         }
 170
 171         this.disabled = state;
 172
 173         if (state) {
 174             this.el.addClass('disabled');
 175             return;
 176         }
 177
 178         this.el.removeClass('disabled');
 179
 180         return;
 181     },
 182
 183     setActive : function(state)
 184     {
 185         if(this.active == state){
 186             return;
 187         }
 188
 189         this.active = state;
 190
 191         if (state) {
 192             this.el.addClass('active');
 193             return;
 194         }
 195
 196         this.el.removeClass('active');
 197
 198         return;
 199     },
 200
 201     isActive: function ()
 202     {
 203         return this.active;
 204     },
 205
 206     setBadge : function(str)
 207     {
 208         if(!this.badgeEl){
 209             return;
 210         }
 211
 212         this.badgeEl.dom.innerHTML = str;
 213     }
 214
 215
 216
 217
 218 });
 219
 220
 221