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