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

   1 <html><head><title>Roo/SplitLayoutRegion.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.SplitLayoutRegion </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cursor</span><span class="jsdoc-syntax">){
  20     </span><span class="jsdoc-var">this.cursor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cursor</span><span class="jsdoc-syntax">;
  21     </span><span class="jsdoc-var">Roo.SplitLayoutRegion.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</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.SplitLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.LayoutRegion</span><span class="jsdoc-syntax">, {
  25     </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">,
  26     </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">,
  27     </span><span class="jsdoc-var">useSplitTips </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  28
  29     </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">){
  30         </span><span class="jsdoc-var">Roo.SplitLayoutRegion.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">);
  31         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.split</span><span class="jsdoc-syntax">){
  32             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
  33                 </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">,
  34                         {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </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">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-split x-layout-split-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">});
  35                 </span><span class="jsdoc-comment">/** The SplitBar for this region
  36                 * @type Roo.SplitBar */
  37                 </span><span class="jsdoc-var">this.split </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.SplitBar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">splitEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.orientation</span><span class="jsdoc-syntax">);
  38                 </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">);
  39                 </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">;
  40                 </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">);
  41                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useSplitTips</span><span class="jsdoc-syntax">){
  42                     </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">;
  43                 }
  44                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.collapsible</span><span class="jsdoc-syntax">){
  45                     </span><span class="jsdoc-var">this.split.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;dblclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  46                 }
  47             }
  48             </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">){
  49                 </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">;
  50             }
  51             </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">){
  52                 </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">;
  53             }
  54             </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">){
  55                 </span><span class="jsdoc-var">this.hideSplitter</span><span class="jsdoc-syntax">();
  56             }
  57         }
  58     },
  59
  60     </span><span class="jsdoc-var">getHMaxSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  61          </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;
  62          </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">);
  63          </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">());
  64     },
  65
  66     </span><span class="jsdoc-var">getVMaxSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  67          </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;
  68          </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">);
  69          </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">());
  70     },
  71
  72     </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">){
  73         </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">);
  74     },
  75
  76     </span><span class="jsdoc-comment">/**
  77      * Returns the {@link Roo.SplitBar} for this region.
  78      * @return {Roo.SplitBar}
  79      */
  80     </span><span class="jsdoc-var">getSplitBar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  81         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">;
  82     },
  83
  84     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  85         </span><span class="jsdoc-var">this.hideSplitter</span><span class="jsdoc-syntax">();
  86         </span><span class="jsdoc-var">Roo.SplitLayoutRegion.superclass.hide.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  87     },
  88
  89     </span><span class="jsdoc-var">hideSplitter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  90         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
  91             </span><span class="jsdoc-var">this.split.el.setLocation</span><span class="jsdoc-syntax">(-2000,-2000);
  92             </span><span class="jsdoc-var">this.split.el.hide</span><span class="jsdoc-syntax">();
  93         }
  94     },
  95
  96     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  97         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
  98             </span><span class="jsdoc-var">this.split.el.show</span><span class="jsdoc-syntax">();
  99         }
 100         </span><span class="jsdoc-var">Roo.SplitLayoutRegion.superclass.show.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 101     },
 102
 103     </span><span class="jsdoc-var">beforeSlide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 104         </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
 105             </span><span class="jsdoc-var">this.bodyEl.clip</span><span class="jsdoc-syntax">();
 106             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">) {
 107                 </span><span class="jsdoc-var">this.tabs.bodyEl.clip</span><span class="jsdoc-syntax">();
 108             }
 109             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
 110                 </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.clip</span><span class="jsdoc-syntax">();
 111
 112                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel.beforeSlide</span><span class="jsdoc-syntax">){
 113                     </span><span class="jsdoc-var">this.activePanel.beforeSlide</span><span class="jsdoc-syntax">();
 114                 }
 115             }
 116         }
 117     },
 118
 119     </span><span class="jsdoc-var">afterSlide </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.unclip</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.unclip</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">.unclip</span><span class="jsdoc-syntax">();
 127                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel.afterSlide</span><span class="jsdoc-syntax">){
 128                     </span><span class="jsdoc-var">this.activePanel.afterSlide</span><span class="jsdoc-syntax">();
 129                 }
 130             }
 131         }
 132     },
 133
 134     </span><span class="jsdoc-var">initAutoHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 135         </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">){
 136             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.autoHideHd</span><span class="jsdoc-syntax">){
 137                 </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">);
 138                 </span><span class="jsdoc-var">this.autoHideHd </span><span class="jsdoc-syntax">= {
 139                     </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">){
 140                         </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">)){
 141                             </span><span class="jsdoc-var">st.delay</span><span class="jsdoc-syntax">(500);
 142                         }
 143                     },
 144                     </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">){
 145                         </span><span class="jsdoc-var">st.cancel</span><span class="jsdoc-syntax">();
 146                     },
 147                     </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
 148                 </span><span class="jsdoc-syntax">};
 149             }
 150             </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">);
 151         }
 152     },
 153
 154     </span><span class="jsdoc-var">clearAutoHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 155         </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">){
 156             </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">);
 157             </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">);
 158         }
 159     },
 160
 161     </span><span class="jsdoc-var">clearMonitor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 162         </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">);
 163     },
 164
 165     </span><span class="jsdoc-comment">// these names are backwards but not changed for compat
 166     </span><span class="jsdoc-var">slideOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 167         </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">()){
 168             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 169         }
 170         </span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 171         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapseBtn</span><span class="jsdoc-syntax">){
 172             </span><span class="jsdoc-var">this.collapseBtn.hide</span><span class="jsdoc-syntax">();
 173         }
 174         </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">);
 175         </span><span class="jsdoc-var">this.closeBtn.hide</span><span class="jsdoc-syntax">();
 176         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stickBtn</span><span class="jsdoc-syntax">){
 177             </span><span class="jsdoc-var">this.stickBtn.show</span><span class="jsdoc-syntax">();
 178         }
 179         </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
 180         </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">());
 181         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 182         </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);
 183         </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">(), {
 184             </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 185                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 186                 </span><span class="jsdoc-var">this.initAutoHide</span><span class="jsdoc-syntax">();
 187                 </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">);
 188                 </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">);
 189             },
 190             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 191             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 192         </span><span class="jsdoc-syntax">});
 193     },
 194
 195     </span><span class="jsdoc-var">afterSlideIn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 196         </span><span class="jsdoc-var">this.clearAutoHide</span><span class="jsdoc-syntax">();
 197         </span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 198         </span><span class="jsdoc-var">this.clearMonitor</span><span class="jsdoc-syntax">();
 199         </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">);
 200         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapseBtn</span><span class="jsdoc-syntax">){
 201             </span><span class="jsdoc-var">this.collapseBtn.show</span><span class="jsdoc-syntax">();
 202         }
 203         </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">);
 204         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stickBtn</span><span class="jsdoc-syntax">){
 205             </span><span class="jsdoc-var">this.stickBtn.hide</span><span class="jsdoc-syntax">();
 206         }
 207         </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">);
 208     },
 209
 210     </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">){
 211         </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">()){
 212             </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">);
 213             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 214         }
 215         </span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 216         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 217         </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">(), {
 218             </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 219                 </span><span class="jsdoc-var">this.el.setLeftTop</span><span class="jsdoc-syntax">(-10000, -10000);
 220                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 221                 </span><span class="jsdoc-var">this.afterSlideIn</span><span class="jsdoc-syntax">();
 222                 </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">);
 223             },
 224             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 225             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 226         </span><span class="jsdoc-syntax">});
 227     },
 228
 229     </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">){
 230         </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">)){
 231             </span><span class="jsdoc-var">this.slideIn</span><span class="jsdoc-syntax">();
 232         }
 233     },
 234
 235     </span><span class="jsdoc-var">animateCollapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 236         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 237         </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);
 238         </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">();
 239         </span><span class="jsdoc-var">this.el.slideOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, {
 240             </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 241                 </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">);
 242                 </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">.3</span><span class="jsdoc-syntax">});
 243                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 244                 </span><span class="jsdoc-var">this.el.setLocation</span><span class="jsdoc-syntax">(-10000,-10000);
 245                 </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 246                 </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">);
 247             },
 248             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 249             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 250         </span><span class="jsdoc-syntax">});
 251     },
 252
 253     </span><span class="jsdoc-var">animateExpand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 254         </span><span class="jsdoc-var">this.beforeSlide</span><span class="jsdoc-syntax">();
 255         </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">());
 256         </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);
 257         </span><span class="jsdoc-var">this.collapsedEl.hide</span><span class="jsdoc-syntax">({
 258             </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">.1
 259         </span><span class="jsdoc-syntax">});
 260         </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">(), {
 261             </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 262                 </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">);
 263                 </span><span class="jsdoc-var">this.afterSlide</span><span class="jsdoc-syntax">();
 264                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
 265                     </span><span class="jsdoc-var">this.split.el.show</span><span class="jsdoc-syntax">();
 266                 }
 267                 </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">);
 268                 </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">);
 269             },
 270             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
 271             </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 272         </span><span class="jsdoc-syntax">});
 273     },
 274
 275     </span><span class="jsdoc-var">anchors </span><span class="jsdoc-syntax">: {
 276         </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">,
 277         </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">,
 278         </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">,
 279         </span><span class="jsdoc-string">&quot;south&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;bottom&quot;
 280     </span><span class="jsdoc-syntax">},
 281
 282     </span><span class="jsdoc-var">sanchors </span><span class="jsdoc-syntax">: {
 283         </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">,
 284         </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">,
 285         </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">,
 286         </span><span class="jsdoc-string">&quot;south&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;b&quot;
 287     </span><span class="jsdoc-syntax">},
 288
 289     </span><span class="jsdoc-var">canchors </span><span class="jsdoc-syntax">: {
 290         </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">,
 291         </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">,
 292         </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">,
 293         </span><span class="jsdoc-string">&quot;south&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;bl-tl&quot;
 294     </span><span class="jsdoc-syntax">},
 295
 296     </span><span class="jsdoc-var">getAnchor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 297         </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">];
 298     },
 299
 300     </span><span class="jsdoc-var">getCollapseAnchor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 301         </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">];
 302     },
 303
 304     </span><span class="jsdoc-var">getSlideAnchor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 305         </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">];
 306     },
 307
 308     </span><span class="jsdoc-var">getAlignAdj </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 309         </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">;
 310         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">){
 311             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 312                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 313             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 314             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
 315                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 316             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 317             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 318                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 319             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 320             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
 321                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[0, 0];
 322             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 323         }
 324     },
 325
 326     </span><span class="jsdoc-var">getExpandAdj </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 327         </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">;
 328         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">){
 329             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 330                 </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];
 331             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 332             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
 333                 </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];
 334             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 335             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 336                 </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">())];
 337             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 338             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
 339                 </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">()];
 340             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 341         }
 342     }
 343 });</span></code></body></html>