git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_nav_SidebarItem.js.html

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