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

   1 <html><head><title>../roojs1/Roo/bootstrap/layout/Split.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  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12
  13
  14 /**
  15  * @class Roo.SplitLayoutRegion
  16  * @extends Roo.LayoutRegion
  17  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
  18  */
  19 </span><span class="jsdoc-var">Roo.bootstrap.layout.Split </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">){
  20     </span><span class="jsdoc-var">this.cursor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.cursor</span><span class="jsdoc-syntax">;
  21     </span><span class="jsdoc-var">Roo.bootstrap.layout.Split.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">);
  22 };
  23
  24 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.layout.Split</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.layout.Region</span><span class="jsdoc-syntax">,
  25 {
  26     </span><span class="jsdoc-var">splitTip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Drag to resize.&quot;</span><span class="jsdoc-syntax">,
  27     </span><span class="jsdoc-var">collapsibleSplitTip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Drag to resize. Double click to hide.&quot;</span><span class="jsdoc-syntax">,
  28     </span><span class="jsdoc-var">useSplitTips </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  29
  30     </span><span class="jsdoc-var">applyConfig </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.layout.Split.superclass.applyConfig.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-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.split</span><span class="jsdoc-syntax">){
  34             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
  35
  36
  37                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">splitEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mgr.el.dom</span><span class="jsdoc-syntax">,  {
  38                                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">,
  39                                 </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;-split&quot;</span><span class="jsdoc-syntax">,
  40                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;roo-layout-split roo-layout-split-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">,
  41                                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;
  42                 </span><span class="jsdoc-syntax">});
  43                 </span><span class="jsdoc-comment">/** The SplitBar for this region
  44                 * @type Roo.SplitBar */
  45                 // does not exist yet...
  46                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.orientation</span><span class="jsdoc-syntax">]);
  47
  48                 </span><span class="jsdoc-var">this.split </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.bootstrap.SplitBar</span><span class="jsdoc-syntax">({
  49                     </span><span class="jsdoc-var">dragElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">splitEl</span><span class="jsdoc-syntax">,
  50                     </span><span class="jsdoc-var">resizingElement</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">,
  51                     </span><span class="jsdoc-var">orientation </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.orientation
  52                 </span><span class="jsdoc-syntax">});
  53
  54                 </span><span class="jsdoc-var">this.split.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;moved&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onSplitMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  55                 </span><span class="jsdoc-var">this.split.useShim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.useShim </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
  56                 </span><span class="jsdoc-var">this.split.getMaximumSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'north' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'south' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'getVMaxSize' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'getHMaxSize'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  57                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useSplitTips</span><span class="jsdoc-syntax">){
  58                     </span><span class="jsdoc-var">this.split.el.dom.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.collapsible </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.collapsibleSplitTip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.splitTip</span><span class="jsdoc-syntax">;
  59                 }
  60                 </span><span class="jsdoc-comment">//if(config.collapsible){
  61                 //    this.split.el.on(&quot;dblclick&quot;, this.collapse,  this);
  62                 //}
  63             </span><span class="jsdoc-syntax">}
  64             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.minSize </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
  65                 </span><span class="jsdoc-var">this.split.minSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.minSize</span><span class="jsdoc-syntax">;
  66             }
  67             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.maxSize </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
  68                 </span><span class="jsdoc-var">this.split.maxSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.maxSize</span><span class="jsdoc-syntax">;
  69             }
  70             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.hideWhenEmpty </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.hidden </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.collapsed</span><span class="jsdoc-syntax">){
  71                 </span><span class="jsdoc-var">this.hideSplitter</span><span class="jsdoc-syntax">();
  72             }
  73         }
  74     },
  75
  76     </span><span class="jsdoc-var">getHMaxSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  77          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cmax </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.maxSize </span><span class="jsdoc-syntax">|| 10000;
  78          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.mgr.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">);
  79          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmax</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">center.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getWidth</span><span class="jsdoc-syntax">())-</span><span class="jsdoc-var">center.getMinWidth</span><span class="jsdoc-syntax">());
  80     },
  81
  82     </span><span class="jsdoc-var">getVMaxSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  83          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cmax </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.maxSize </span><span class="jsdoc-syntax">|| 10000;
  84          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.mgr.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">);
  85          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmax</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-var">this.el.getHeight</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">center.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getHeight</span><span class="jsdoc-syntax">())-</span><span class="jsdoc-var">center.getMinHeight</span><span class="jsdoc-syntax">());
  86     },
  87
  88     </span><span class="jsdoc-var">onSplitMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">split</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">){
  89         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resized&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">);
  90     },
  91
  92     </span><span class="jsdoc-comment">/**
  93      * Returns the {@link Roo.SplitBar} for this region.
  94      * @return {Roo.SplitBar}
  95      */
  96     </span><span class="jsdoc-var">getSplitBar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  97         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">;
  98     },
  99
 100     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 101         </span><span class="jsdoc-var">this.hideSplitter</span><span class="jsdoc-syntax">();
 102         </span><span class="jsdoc-var">Roo.bootstrap.layout.Split.superclass.hide.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 103     },
 104
 105     </span><span class="jsdoc-var">hideSplitter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 106         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
 107             </span><span class="jsdoc-var">this.split.el.setLocation</span><span class="jsdoc-syntax">(-2000,-2000);
 108             </span><span class="jsdoc-var">this.split.el.hide</span><span class="jsdoc-syntax">();
 109         }
 110     },
 111
 112     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 113         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
 114             </span><span class="jsdoc-var">this.split.el.show</span><span class="jsdoc-syntax">();
 115         }
 116         </span><span class="jsdoc-var">Roo.bootstrap.layout.Split.superclass.show.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 117     },
 118
 119     </span><span class="jsdoc-var">beforeSlide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 120         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){</span><span class="jsdoc-comment">// firefox overflow auto bug workaround
 121             </span><span class="jsdoc-var">this.bodyEl.clip</span><span class="jsdoc-syntax">();
 122             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">) {
 123                 </span><span class="jsdoc-var">this.tabs.bodyEl.clip</span><span class="jsdoc-syntax">();
 124             }
 125             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
 126                 </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.clip</span><span class="jsdoc-syntax">();
 127
 128                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel.beforeSlide</span><span class="jsdoc-syntax">){
 129                     </span><span class="jsdoc-var">this.activePanel.beforeSlide</span><span class="jsdoc-syntax">();
 130                 }
 131             }
 132         }
 133     },
 134
 135     </span><span class="jsdoc-var">afterSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 136         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){</span><span class="jsdoc-comment">// firefox overflow auto bug workaround
 137             </span><span class="jsdoc-var">this.bodyEl.unclip</span><span class="jsdoc-syntax">();
 138             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">) {
 139                 </span><span class="jsdoc-var">this.tabs.bodyEl.unclip</span><span class="jsdoc-syntax">();
 140             }
 141             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
 142                 </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.unclip</span><span class="jsdoc-syntax">();
 143                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel.afterSlide</span><span class="jsdoc-syntax">){
 144                     </span><span class="jsdoc-var">this.activePanel.afterSlide</span><span class="jsdoc-syntax">();
 145                 }
 146             }
 147         }
 148     },
 149
 150     </span><span class="jsdoc-var">initAutoHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 151         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoHide </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 152             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.autoHideHd</span><span class="jsdoc-syntax">){
 153                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.DelayedTask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.slideIn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 154                 </span><span class="jsdoc-var">this.autoHideHd </span><span class="jsdoc-syntax">= {
 155                     </span><span class="jsdoc-string">&quot;mouseout&quot;</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">){
 156                         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)){
 157                             </span><span class="jsdoc-var">st.delay</span><span class="jsdoc-syntax">(500);
 158                         }
 159                     },
 160                     </span><span class="jsdoc-string">&quot;mouseover&quot; </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">){
 161                         </span><span class="jsdoc-var">st.cancel</span><span class="jsdoc-syntax">();
 162                     },
 163                     </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
 164                 </span><span class="jsdoc-syntax">};
 165             }
 166             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoHideHd</span><span class="jsdoc-syntax">);
 167         }
 168     },
 169
 170     </span><span class="jsdoc-var">clearAutoHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 171         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoHide </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 172             </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.autoHideHd.mouseout</span><span class="jsdoc-syntax">);
 173             </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseover&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.autoHideHd.mouseover</span><span class="jsdoc-syntax">);
 174         }
 175     },
 176
 177     </span><span class="jsdoc-var">clearMonitor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 178         </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.slideInIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 179     },
 180
 181     </span><span class="jsdoc-comment">// these names are backwards but not changed for compat
 182     </span><span class="jsdoc-var">slideOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 183         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.hasActiveFx</span><span class="jsdoc-syntax">()){
 184             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 185         }
 186         </span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 187         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapseBtn</span><span class="jsdoc-syntax">){
 188             </span><span class="jsdoc-var">this.collapseBtn.hide</span><span class="jsdoc-syntax">();
 189         }
 190         </span><span class="jsdoc-var">this.closeBtnState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.closeBtn.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">);
 191         </span><span class="jsdoc-var">this.closeBtn.hide</span><span class="jsdoc-syntax">();
 192         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stickBtn</span><span class="jsdoc-syntax">){
 193             </span><span class="jsdoc-var">this.stickBtn.show</span><span class="jsdoc-syntax">();
 194         }
 195         </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
 196         </span><span class="jsdoc-var">this.el.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getCollapseAnchor</span><span class="jsdoc-syntax">());
 197         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 198         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, 10001);
 199         </span><span class="jsdoc-var">this.el.slideIn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSlideAnchor</span><span class="jsdoc-syntax">(), {
 200             </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 201                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 202                 </span><span class="jsdoc-var">this.initAutoHide</span><span class="jsdoc-syntax">();
 203                 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.slideInIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 204                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;slideshow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 205             },
 206             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 207             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 208         </span><span class="jsdoc-syntax">});
 209     },
 210
 211     </span><span class="jsdoc-var">afterSlideIn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 212         </span><span class="jsdoc-var">this.clearAutoHide</span><span class="jsdoc-syntax">();
 213         </span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 214         </span><span class="jsdoc-var">this.clearMonitor</span><span class="jsdoc-syntax">();
 215         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 216         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapseBtn</span><span class="jsdoc-syntax">){
 217             </span><span class="jsdoc-var">this.collapseBtn.show</span><span class="jsdoc-syntax">();
 218         }
 219         </span><span class="jsdoc-var">this.closeBtn.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.closeBtnState</span><span class="jsdoc-syntax">);
 220         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stickBtn</span><span class="jsdoc-syntax">){
 221             </span><span class="jsdoc-var">this.stickBtn.hide</span><span class="jsdoc-syntax">();
 222         }
 223         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;slidehide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 224     },
 225
 226     </span><span class="jsdoc-var">slideIn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">){
 227         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.hasActiveFx</span><span class="jsdoc-syntax">()){
 228             </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">);
 229             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 230         }
 231         </span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 232         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 233         </span><span class="jsdoc-var">this.el.slideOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSlideAnchor</span><span class="jsdoc-syntax">(), {
 234             </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 235                 </span><span class="jsdoc-var">this.el.setLeftTop</span><span class="jsdoc-syntax">(-10000, -10000);
 236                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 237                 </span><span class="jsdoc-var">this.afterSlideIn</span><span class="jsdoc-syntax">();
 238                 </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">);
 239             },
 240             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 241             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 242         </span><span class="jsdoc-syntax">});
 243     },
 244
 245     </span><span class="jsdoc-var">slideInIf </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">){
 246         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">)){
 247             </span><span class="jsdoc-var">this.slideIn</span><span class="jsdoc-syntax">();
 248         }
 249     },
 250
 251     </span><span class="jsdoc-var">animateCollapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 252         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 253         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, 20000);
 254         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getSlideAnchor</span><span class="jsdoc-syntax">();
 255         </span><span class="jsdoc-var">this.el.slideOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, {
 256             </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 257                 </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 258                 </span><span class="jsdoc-var">this.collapsedEl.slideIn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">3});
 259                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 260                 </span><span class="jsdoc-var">this.el.setLocation</span><span class="jsdoc-syntax">(-10000,-10000);
 261                 </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 262                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;collapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 263             },
 264             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 265             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 266         </span><span class="jsdoc-syntax">});
 267     },
 268
 269     </span><span class="jsdoc-var">animateExpand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 270         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 271         </span><span class="jsdoc-var">this.el.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getCollapseAnchor</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.getExpandAdj</span><span class="jsdoc-syntax">());
 272         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, 20000);
 273         </span><span class="jsdoc-var">this.collapsedEl.hide</span><span class="jsdoc-syntax">({
 274             </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">1
 275         });
 276         </span><span class="jsdoc-var">this.el.slideIn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSlideAnchor</span><span class="jsdoc-syntax">(), {
 277             </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 278                 </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 279                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 280                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
 281                     </span><span class="jsdoc-var">this.split.el.show</span><span class="jsdoc-syntax">();
 282                 }
 283                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 284                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;expanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 285             },
 286             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 287             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 288         </span><span class="jsdoc-syntax">});
 289     },
 290
 291     </span><span class="jsdoc-var">anchors </span><span class="jsdoc-syntax">: {
 292         </span><span class="jsdoc-string">&quot;west&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">,
 293         </span><span class="jsdoc-string">&quot;east&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">,
 294         </span><span class="jsdoc-string">&quot;north&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">,
 295         </span><span class="jsdoc-string">&quot;south&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;bottom&quot;
 296     </span><span class="jsdoc-syntax">},
 297
 298     </span><span class="jsdoc-var">sanchors </span><span class="jsdoc-syntax">: {
 299         </span><span class="jsdoc-string">&quot;west&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">,
 300         </span><span class="jsdoc-string">&quot;east&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">,
 301         </span><span class="jsdoc-string">&quot;north&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">,
 302         </span><span class="jsdoc-string">&quot;south&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;b&quot;
 303     </span><span class="jsdoc-syntax">},
 304
 305     </span><span class="jsdoc-var">canchors </span><span class="jsdoc-syntax">: {
 306         </span><span class="jsdoc-string">&quot;west&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;tl-tr&quot;</span><span class="jsdoc-syntax">,
 307         </span><span class="jsdoc-string">&quot;east&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;tr-tl&quot;</span><span class="jsdoc-syntax">,
 308         </span><span class="jsdoc-string">&quot;north&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;tl-bl&quot;</span><span class="jsdoc-syntax">,
 309         </span><span class="jsdoc-string">&quot;south&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;bl-tl&quot;
 310     </span><span class="jsdoc-syntax">},
 311
 312     </span><span class="jsdoc-var">getAnchor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 313         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.anchors</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">];
 314     },
 315
 316     </span><span class="jsdoc-var">getCollapseAnchor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 317         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.canchors</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">];
 318     },
 319
 320     </span><span class="jsdoc-var">getSlideAnchor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 321         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.sanchors</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">];
 322     },
 323
 324     </span><span class="jsdoc-var">getAlignAdj </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 325         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cmargins</span><span class="jsdoc-syntax">;
 326         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">){
 327             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 328                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 329             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 330             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
 331                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 332             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 333             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 334                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 335             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 336             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
 337                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 338             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 339         }
 340     },
 341
 342     </span><span class="jsdoc-var">getExpandAdj </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 343         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.collapsedEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cmargins</span><span class="jsdoc-syntax">;
 344         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">){
 345             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 346                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[-(</span><span class="jsdoc-var">cm.right</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">c.getWidth</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">cm.left</span><span class="jsdoc-syntax">), 0];
 347             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 348             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
 349                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cm.right</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">c.getWidth</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">cm.left</span><span class="jsdoc-syntax">, 0];
 350             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 351             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 352                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, -(</span><span class="jsdoc-var">cm.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cm.bottom</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">c.getHeight</span><span class="jsdoc-syntax">())];
 353             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 354             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
 355                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, </span><span class="jsdoc-var">cm.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cm.bottom</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">c.getHeight</span><span class="jsdoc-syntax">()];
 356             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 357         }
 358     }
 359 });</span></code></body></html>