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

   1 <html><head><title>Roo/bootstrap/Component.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  * base class for bootstrap elements.
   5  *
   6  */
   7
   8 </span><span class="jsdoc-var">Roo.bootstrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap </span><span class="jsdoc-syntax">|| {};
   9 </span><span class="jsdoc-comment">/**
  10  * @class Roo.bootstrap.Component
  11  * @extends Roo.Component
  12  * Bootstrap Component base class
  13  * @cfg {String} cls css class
  14  * @cfg {String} style any extra css
  15  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
  16  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
  17  * @cfg {string} dataId cutomer id
  18  * @cfg {string} name Specifies name attribute
  19  * @cfg {string} tooltip  Text for the tooltip
  20  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
  21  * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
  22
  23  * @constructor
  24  * Do not use directly - it does not do anything..
  25  * @param {Object} config The config object
  26  */
  27
  28
  29
  30 </span><span class="jsdoc-var">Roo.bootstrap.Component </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">){
  31     </span><span class="jsdoc-var">Roo.bootstrap.Component.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">);
  32
  33     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  34         </span><span class="jsdoc-comment">/**
  35          * @event childrenrendered
  36          * Fires when the children have been rendered..
  37          * @param {Roo.bootstrap.Component} this
  38          */
  39         </span><span class="jsdoc-string">&quot;childrenrendered&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  40
  41
  42
  43     </span><span class="jsdoc-syntax">});
  44
  45
  46 };
  47
  48 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BoxComponent</span><span class="jsdoc-syntax">,  {
  49
  50
  51     </span><span class="jsdoc-var">allowDomMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// to stop relocations in parent onRender...
  52
  53     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  54
  55     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  56
  57     </span><span class="jsdoc-var">autoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  58
  59     </span><span class="jsdoc-var">tooltip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  60     </span><span class="jsdoc-comment">/**
  61      * Initialize Events for the element
  62      */
  63     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { },
  64
  65     </span><span class="jsdoc-var">xattr </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  66
  67     </span><span class="jsdoc-var">parentId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  68
  69     </span><span class="jsdoc-var">can_build_overlaid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  70
  71     </span><span class="jsdoc-var">container_method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  72
  73     </span><span class="jsdoc-var">dataId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  74
  75     </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  76
  77     </span><span class="jsdoc-var">parent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
  78         </span><span class="jsdoc-comment">// returns the parent component..
  79         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.ComponentMgr.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.parentId</span><span class="jsdoc-syntax">)
  80
  81
  82     },
  83
  84     </span><span class="jsdoc-comment">// private
  85     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
  86     {
  87        </span><span class="jsdoc-comment">// Roo.log(&quot;Call onRender: &quot; + this.xtype);
  88
  89         </span><span class="jsdoc-var">Roo.bootstrap.Component.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
  90
  91         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
  92             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">)) {
  93                 </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtypex'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">));
  94                 </span><span class="jsdoc-var">this.el.dom.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">);
  95
  96                 </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
  97             }
  98
  99             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 100         }
 101
 102
 103
 104         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({},  </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">());
 105
 106         </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
 107
 108         </span><span class="jsdoc-comment">// fill in the extra attributes
 109         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xattr </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xattr</span><span class="jsdoc-syntax">) ==</span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">) {
 110             </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">this.xattr</span><span class="jsdoc-syntax">) {
 111                 </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.xattr</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
 112             }
 113         }
 114
 115         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dataId</span><span class="jsdoc-syntax">){
 116             </span><span class="jsdoc-var">cfg.dataId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dataId</span><span class="jsdoc-syntax">;
 117         }
 118
 119         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">) {
 120             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.cls</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
 121         }
 122
 123         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// fixme needs to support more complex style data.
 124             </span><span class="jsdoc-var">cfg.style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
 125         }
 126
 127         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">){
 128             </span><span class="jsdoc-var">cfg.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
 129         }
 130
 131         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 132
 133         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">) {
 134             </span><span class="jsdoc-var">this.tooltipEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tooltip'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">);
 135         }
 136
 137         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabIndex </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
 138             </span><span class="jsdoc-var">this.el.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tabIndex'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tabIndex</span><span class="jsdoc-syntax">);
 139         }
 140
 141         </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
 142
 143     },
 144     </span><span class="jsdoc-comment">/**
 145      * Fetch the element to add children to
 146      * @return {Roo.Element} defaults to this.el
 147      */
 148     </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 149     {
 150         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 151     },
 152     </span><span class="jsdoc-comment">/**
 153      * Fetch the element to display the tooltip on.
 154      * @return {Roo.Element} defaults to this.el
 155      */
 156     </span><span class="jsdoc-var">tooltipEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 157     {
 158         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 159     },
 160
 161     </span><span class="jsdoc-var">addxtype  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">)
 162     {
 163         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 164
 165         </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">);
 166         </span><span class="jsdoc-comment">//Roo.log(['addxtype', cn]);
 167
 168         </span><span class="jsdoc-var">cn.parentType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xtype</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">//??
 169         </span><span class="jsdoc-var">cn.parentId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
 170
 171         </span><span class="jsdoc-var">cntr </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-string">'getChildContainer' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">;
 172         </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">cn.container_method</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
 173             </span><span class="jsdoc-var">cntr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.container_method</span><span class="jsdoc-syntax">;
 174         }
 175
 176
 177         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">has_flexy_each </span><span class="jsdoc-syntax">=  (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'flexy:foreach'</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">);
 178
 179         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">has_flexy_if </span><span class="jsdoc-syntax">=  (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'flexy:if'</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">);
 180
 181         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">build_from_html </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">Roo.XComponent.build_from_html</span><span class="jsdoc-syntax">;
 182
 183         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">is_body  </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">tree.xtype </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'Body'</span><span class="jsdoc-syntax">) ;
 184
 185         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">page_has_body </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'Roo.bootstrap.Body'</span><span class="jsdoc-syntax">);
 186
 187         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">self_cntr_el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">](</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">));
 188
 189         </span><span class="jsdoc-comment">// do not try and build conditional elements
 190         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">has_flexy_each </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">has_flexy_if </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.can_build_overlaid </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">build_from_html</span><span class="jsdoc-syntax">) {
 191             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 192         }
 193
 194         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">has_flexy_each </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">build_from_html </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">is_body </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">page_has_body</span><span class="jsdoc-syntax">) {
 195             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">has_flexy_if </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree.name</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">build_from_html </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">is_body </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">page_has_body</span><span class="jsdoc-syntax">){
 196                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">is_body</span><span class="jsdoc-syntax">);
 197             }
 198
 199             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">echild </span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">self_cntr_el </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">self_cntr_el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&gt;*[name=' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">tree.name </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">']'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 200
 201             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">echild</span><span class="jsdoc-syntax">){
 202                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">),</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">);
 203             }
 204
 205             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'skipping render'</span><span class="jsdoc-syntax">);
 206             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">;
 207
 208         }
 209
 210         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 211         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">build_from_html</span><span class="jsdoc-syntax">) {
 212             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 213         }
 214
 215         </span><span class="jsdoc-comment">// this i think handles overlaying multiple children of the same type
 216         // with the sam eelement.. - which might be buggy..
 217         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) {
 218             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">echild </span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">self_cntr_el </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">self_cntr_el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&gt;*[xtype]'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 219
 220             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">echild</span><span class="jsdoc-syntax">) {
 221                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 222             }
 223
 224             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">echild </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">echild.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.pop</span><span class="jsdoc-syntax">() != </span><span class="jsdoc-var">cn.xtype</span><span class="jsdoc-syntax">) {
 225                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 226             }
 227
 228             </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">),</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">);
 229         }
 230
 231         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
 232     },
 233
 234
 235     </span><span class="jsdoc-var">addxtypeChild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">is_body</span><span class="jsdoc-syntax">)
 236     {
 237         </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'addxtypeChild:' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">);
 238         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 239         </span><span class="jsdoc-var">cntr </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-string">'getChildContainer' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">;
 240
 241
 242         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">has_flexy </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'flexy:if'</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) ||
 243                     (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'flexy:foreach'</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">);
 244
 245
 246
 247         </span><span class="jsdoc-var">skip_children </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 248         </span><span class="jsdoc-comment">// render the element if it's not BODY.
 249         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">is_body</span><span class="jsdoc-syntax">) {
 250
 251             </span><span class="jsdoc-comment">// if parent was disabled, then do not try and create the children..
 252             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">](</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)){
 253                 </span><span class="jsdoc-var">tree.items </span><span class="jsdoc-syntax">= [];
 254                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">;
 255             }
 256
 257             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">);
 258
 259             </span><span class="jsdoc-var">cn.parentType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xtype</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">//??
 260             </span><span class="jsdoc-var">cn.parentId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
 261
 262             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">build_from_html </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">Roo.XComponent.build_from_html</span><span class="jsdoc-syntax">;
 263
 264
 265             </span><span class="jsdoc-comment">// does the container contain child eleemnts with 'xtype' attributes.
 266             // that match this xtype..
 267             // note - when we render we create these as well..
 268             // so we should check to see if body has xtype set.
 269             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">build_from_html </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'Roo.bootstrap.Body'</span><span class="jsdoc-syntax">) {
 270
 271                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">self_cntr_el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">](</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">));
 272                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">echild </span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">self_cntr_el </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">self_cntr_el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&gt;*[xtype]'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 273                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">echild</span><span class="jsdoc-syntax">) {
 274                     </span><span class="jsdoc-comment">//Roo.log(Roo.XComponent.build_from_html);
 275                     //Roo.log(&quot;got echild:&quot;);
 276                     //Roo.log(echild);
 277                 </span><span class="jsdoc-syntax">}
 278                 </span><span class="jsdoc-comment">// there is a scenario where some of the child elements are flexy:if (and all of the same type)
 279                 // and are not displayed -this causes this to use up the wrong element when matching.
 280                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
 281
 282
 283                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">echild </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">echild.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xtype'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.pop</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">cn.xtype</span><span class="jsdoc-syntax">) {
 284                   </span><span class="jsdoc-comment">//  Roo.log(&quot;found child for &quot; + this.xtype +&quot;: &quot; + echild.attr('xtype') );
 285
 286
 287
 288                     </span><span class="jsdoc-var">cn.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">echild</span><span class="jsdoc-syntax">;
 289                   </span><span class="jsdoc-comment">//  Roo.log(&quot;GOT&quot;);
 290                     //echild.dom.removeAttribute('xtype');
 291                 </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 292                     </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;MISSING &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cn.xtype </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; on child of &quot; </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'xbuilderid'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">'no parent'</span><span class="jsdoc-syntax">));
 293                     </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">self_cntr_el</span><span class="jsdoc-syntax">);
 294                     </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">echild</span><span class="jsdoc-syntax">);
 295                     </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">);
 296                 }
 297             }
 298
 299
 300
 301             </span><span class="jsdoc-comment">// if object has flexy:if - then it may or may not be rendered.
 302             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">build_from_html </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">has_flexy </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">cn.el </span><span class="jsdoc-syntax">&amp;&amp;  </span><span class="jsdoc-var">cn.can_build_overlaid</span><span class="jsdoc-syntax">) {
 303                 </span><span class="jsdoc-comment">// skip a flexy if element.
 304                 </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'skipping render'</span><span class="jsdoc-syntax">);
 305                 </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">);
 306                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cn.el</span><span class="jsdoc-syntax">) {
 307                     </span><span class="jsdoc-var">Roo.debug </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'skipping all children'</span><span class="jsdoc-syntax">);
 308                     </span><span class="jsdoc-var">skip_children </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 309                 }
 310
 311              } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 312
 313                 </span><span class="jsdoc-comment">// actually if flexy:foreach is found, we really want to create
 314                 // multiple copies here...
 315                 //Roo.log('render');
 316                 //Roo.log(this[cntr]());
 317                 // some elements do not have render methods.. like the layouts...
 318                 /*
 319                 if(this[cntr](true) === false){
 320                     cn.items = [];
 321                     return cn;
 322                 }
 323                 */
 324                 </span><span class="jsdoc-var">cn.render </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">cn.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">](</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
 325
 326              }
 327             </span><span class="jsdoc-comment">// then add the element..
 328         </span><span class="jsdoc-syntax">}
 329
 330         </span><span class="jsdoc-comment">// handle the kids..
 331
 332         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nitems </span><span class="jsdoc-syntax">= [];
 333         </span><span class="jsdoc-comment">/*
 334         if (typeof (tree.menu) != 'undefined') {
 335             tree.menu.parentType = cn.xtype;
 336             tree.menu.triggerEl = cn.el;
 337             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
 338
 339         }
 340         */
 341         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tree.items </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">tree.items.length</span><span class="jsdoc-syntax">) {
 342             </span><span class="jsdoc-var">cn.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nitems</span><span class="jsdoc-syntax">;
 343             </span><span class="jsdoc-comment">//Roo.log([&quot;no children&quot;, this]);
 344
 345             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">;
 346         }
 347
 348         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tree.items</span><span class="jsdoc-syntax">;
 349         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">tree.items</span><span class="jsdoc-syntax">;
 350
 351         </span><span class="jsdoc-comment">//Roo.log(items.length);
 352             // add the items..
 353         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">skip_children</span><span class="jsdoc-syntax">) {
 354             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0;</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">items.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 355               </span><span class="jsdoc-comment">//  Roo.log(['add child', items[i]]);
 356                 </span><span class="jsdoc-var">nitems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">])));
 357             }
 358         }
 359
 360         </span><span class="jsdoc-var">cn.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nitems</span><span class="jsdoc-syntax">;
 361
 362         </span><span class="jsdoc-comment">//Roo.log(&quot;fire childrenrendered&quot;);
 363
 364         </span><span class="jsdoc-var">cn.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'childrenrendered'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 365
 366         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">;
 367     },
 368
 369     </span><span class="jsdoc-comment">/**
 370      * Set the element that will be used to show or hide
 371      */
 372     </span><span class="jsdoc-var">setVisibilityEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)
 373     {
 374         </span><span class="jsdoc-var">this.visibilityEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 375     },
 376
 377      </span><span class="jsdoc-comment">/**
 378      * Get the element that will be used to show or hide
 379      */
 380     </span><span class="jsdoc-var">getVisibilityEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 381     {
 382         </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.visibilityEl</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">) {
 383             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.visibilityEl</span><span class="jsdoc-syntax">;
 384         }
 385
 386         </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.visibilityEl</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
 387             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.visibilityEl </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'parent' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
 388         }
 389
 390         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
 391     },
 392
 393     </span><span class="jsdoc-comment">/**
 394      * Show a component - removes 'hidden' class
 395      */
 396     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 397     {
 398         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.getVisibilityEl</span><span class="jsdoc-syntax">()){
 399             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 400         }
 401
 402         </span><span class="jsdoc-var">this.getVisibilityEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'d-none'</span><span class="jsdoc-syntax">]);
 403
 404         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 405
 406
 407     },
 408     </span><span class="jsdoc-comment">/**
 409      * Hide a component - adds 'hidden' class
 410      */
 411     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 412     {
 413         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.getVisibilityEl</span><span class="jsdoc-syntax">()){
 414             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 415         }
 416
 417         </span><span class="jsdoc-var">this.getVisibilityEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'d-none'</span><span class="jsdoc-syntax">]);
 418
 419         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 420
 421     }
 422 });
 423
 424  </span></code></body></html>