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

   1 <html><head><title>Roo/bootstrap/NavProgressItem.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  * Nav Progress Item
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavProgressItem
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap NavProgressItem class
  12  * @cfg {String} rid the reference id
  13  * @cfg {Boolean} active (true|false) Is item active default false
  14  * @cfg {Boolean} disabled (true|false) Is item active default false
  15  * @cfg {String} html
  16  * @cfg {String} position (top|bottom) text position default bottom
  17  * @cfg {String} icon show icon instead of number
  18  *
  19  * @constructor
  20  * Create a new NavProgressItem
  21  * @param {Object} config The config object
  22  */
  23 </span><span class="jsdoc-var">Roo.bootstrap.NavProgressItem </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">){
  24     </span><span class="jsdoc-var">Roo.bootstrap.NavProgressItem.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">);
  25     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  26         </span><span class="jsdoc-comment">// raw events
  27         /**
  28          * @event click
  29          * The raw click event for the entire grid.
  30          * @param {Roo.bootstrap.NavProgressItem} this
  31          * @param {Roo.EventObject} e
  32          */
  33         </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  34     </span><span class="jsdoc-syntax">});
  35
  36 };
  37
  38 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.NavProgressItem</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  39
  40     </span><span class="jsdoc-var">rid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  41     </span><span class="jsdoc-var">active </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  42     </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  43     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  44     </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'bottom'</span><span class="jsdoc-syntax">,
  45     </span><span class="jsdoc-var">icon </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  46
  47     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  48     {
  49         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">iconCls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-navigation-bar-item-icon'</span><span class="jsdoc-syntax">;
  50
  51         </span><span class="jsdoc-var">iconCls </span><span class="jsdoc-syntax">+= ((</span><span class="jsdoc-var">this.icon</span><span class="jsdoc-syntax">) ? (</span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.icon</span><span class="jsdoc-syntax">) : (</span><span class="jsdoc-string">' step-number'</span><span class="jsdoc-syntax">)) ;
  52
  53         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  54             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">,
  55             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-navigation-bar-item'</span><span class="jsdoc-syntax">,
  56             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  57                 {
  58                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  59                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">iconCls
  60                 </span><span class="jsdoc-syntax">}
  61             ]
  62         };
  63
  64         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">){
  65             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' active'</span><span class="jsdoc-syntax">;
  66         }
  67         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
  68             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' disabled'</span><span class="jsdoc-syntax">;
  69         }
  70
  71         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
  72     },
  73
  74     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  75     {
  76         </span><span class="jsdoc-var">this.setDisabled</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  77     },
  78
  79     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  80     {
  81         </span><span class="jsdoc-var">this.setDisabled</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
  82     },
  83
  84     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  85     {
  86         </span><span class="jsdoc-var">this.iconEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-navigation-bar-item-icon'</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">();
  87
  88         </span><span class="jsdoc-var">this.iconEl.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">);
  89     },
  90
  91     </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">)
  92     {
  93         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
  94
  95         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
  96             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  97         }
  98
  99         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</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">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 100             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 101         };
 102
 103         </span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setActiveItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 104     },
 105
 106     </span><span class="jsdoc-var">isActive</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
 107     {
 108         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
 109     },
 110
 111     </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">)
 112     {
 113         </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">){
 114             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 115         }
 116
 117         </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">;
 118
 119         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">) {
 120             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 121             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 122         }
 123
 124         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 125
 126         </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 127     },
 128
 129     </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">)
 130     {
 131         </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">){
 132             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 133         }
 134
 135         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">;
 136
 137         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">) {
 138             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'disabled'</span><span class="jsdoc-syntax">);
 139             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 140         }
 141
 142         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'disabled'</span><span class="jsdoc-syntax">);
 143     },
 144
 145     </span><span class="jsdoc-var">tooltipEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 146     {
 147         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-navigation-bar-item-icon'</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">();;
 148     }
 149 });
 150
 151
 152  </span></code></body></html>