docs
authorAlan Knowles <alan@akbkhome.com>
Fri, 16 Jul 2010 07:55:13 +0000 (15:55 +0800)
committerAlan Knowles <alan@akbkhome.com>
Fri, 16 Jul 2010 07:55:13 +0000 (15:55 +0800)
46 files changed:
buildSDK/doc_templates/allclasses.tmpl [deleted file]
buildSDK/doc_templates/allfiles.tmpl [deleted file]
buildSDK/doc_templates/class.tmpl [deleted file]
buildSDK/doc_templates/index.tmpl [deleted file]
buildSDK/doc_templates/symbol.tmpl [deleted file]
docs/default.css [new file with mode: 0644]
docs/doc.js [new file with mode: 0644]
docs/header.html [new file with mode: 0644]
docs/index.html [new file with mode: 0644]
docs/page.js [new file with mode: 0644]
docs/symbols/src/Array.js.html [new file with mode: 0644]
docs/symbols/src/Date.js.html [new file with mode: 0644]
docs/symbols/src/Function.js.html [new file with mode: 0644]
docs/symbols/src/Number.js.html [new file with mode: 0644]
docs/symbols/src/Roo.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Ajax.js.html [new file with mode: 0644]
docs/symbols/src/Roo_BasicDialog.js.html [new file with mode: 0644]
docs/symbols/src/Roo_BasicLayoutRegion.js.html [new file with mode: 0644]
docs/symbols/src/Roo_BorderLayout.js.html [new file with mode: 0644]
docs/symbols/src/Roo_BoxComponent.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Button.js.html [new file with mode: 0644]
docs/symbols/src/Roo_CenterLayoutRegion.js.html [new file with mode: 0644]
docs/symbols/src/Roo_ColorPalette.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Component.js.html [new file with mode: 0644]
docs/symbols/src/Roo_ComponentMgr.js.html [new file with mode: 0644]
docs/symbols/src/Roo_CompositeElement.js.html [new file with mode: 0644]
docs/symbols/src/Roo_CompositeElementLite.js.html [new file with mode: 0644]
docs/symbols/src/Roo_ContentPanel.js.html [new file with mode: 0644]
docs/symbols/src/Roo_DDView.js.html [new file with mode: 0644]
docs/symbols/src/Roo_DatePicker.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Document.js.html [new file with mode: 0644]
docs/symbols/src/Roo_DomHelper.js.html [new file with mode: 0644]
docs/symbols/src/Roo_DomQuery.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Editor.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Element.js.html [new file with mode: 0644]
docs/symbols/src/Roo_EventManager.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Fx.js.html [new file with mode: 0644]
docs/symbols/src/Roo_JsonView.js.html [new file with mode: 0644]
docs/symbols/src/Roo_KeyMap.js.html [new file with mode: 0644]
docs/symbols/src/Roo_KeyNav.js.html [new file with mode: 0644]
docs/symbols/src/Roo_Layer.js.html [new file with mode: 0644]
docs/symbols/src/Roo_LayoutManager.js.html [new file with mode: 0644]
docs/symbols/src/Roo_LayoutRegion.js.html [new file with mode: 0644]
docs/symbols/src/Roo_LayoutStateManager.js.html [new file with mode: 0644]
docs/symbols/src/Roo_LoadMask.js.html [new file with mode: 0644]
docs/symbols/src/String.js.html [new file with mode: 0644]

diff --git a/buildSDK/doc_templates/allclasses.tmpl b/buildSDK/doc_templates/allclasses.tmpl
deleted file mode 100644 (file)
index 32f4358..0000000
+++ /dev/null
@@ -1,17 +0,0 @@
-<div align="center">{+new Link().toFile("index.html").withText("Class Index")+}
-| {+new Link().toFile("files.html").withText("File Index")+}</div>
-<hr />
-<h2>Classes</h2>
-<ul class="classList">
-       <for each="thisClass" in="data">
-       <li>{!
-               if (thisClass.alias == "_global_") {
-                       output += "<i>"+new Link().toClass(thisClass.alias)+"</i>";
-               }
-               else {
-                       output += new Link().toClass(thisClass.alias);
-               }
-       !}</li>
-       </for>
-</ul>
-<hr />
\ No newline at end of file
diff --git a/buildSDK/doc_templates/allfiles.tmpl b/buildSDK/doc_templates/allfiles.tmpl
deleted file mode 100644 (file)
index aff1f2c..0000000
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-       <head>
-               <meta http-equiv="content-type" content="text/html; charset={+Options.encoding+}"" />
-               {! Link.base = ""; /* all generated links will be relative to this */ !}
-               <title>JsDoc Reference - File Index</title>
-               <meta name="generator" content="JsDoc Toolkit" />
-               
-               <style type="text/css">
-               <!-- { + includeStatic("static/default.css") + } -->
-               </style>
-       </head>
-       
-       <body>
-               <!-- { + includeStatic("static/header.html") + } -->
-               
-               <div id="index">
-                       <!-- { + JSDOC.publish.classesIndex + } -->
-               </div>
-               
-               <div id="content">
-                       <h1 class="classTitle">File Index</h1>
-                       
-                       <for each="item" in="data">
-                       <div>
-                               <h2>{+new Link().toSrc(item.alias)+}</h2>
-                               <if test="item.desc">{+resolveLinks(summarize(item.desc))+}</if>
-                               <dl>
-                                       <if test="item.author">
-                                               <dt class="heading">Author:</dt>
-                                               <dd>{+item.author+}</dd>
-                                       </if>
-                                       <if test="item.version">
-                                               <dt class="heading">Version:</dt>
-                                                       <dd>{+item.version+}</dd>
-                                       </if>
-                               </dl>
-                       </div>
-                       <hr />
-                       </for>
-                       
-               </div>
-               <div class="fineprint" style="clear:both">
-                       <if test="Options.copyright">&copy;{+Options.copyright+}<br /></if>
-                       Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspeciton Doc Generator</a> {+Options.version+} on {+new Date()+}
-                       Based on 
-                       <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a> on {+new Date()+}
-               </div>
-       </body>
-</html>
\ No newline at end of file
diff --git a/buildSDK/doc_templates/class.tmpl b/buildSDK/doc_templates/class.tmpl
deleted file mode 100644 (file)
index 655e639..0000000
+++ /dev/null
@@ -1,766 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
-       <head>
-               <meta http-equiv="content-type" content="text/html; charset={+Options.encoding+}" />
-               <meta name="generator" content="JsDoc Toolkit" />
-               {! Link.base = "../"; /* all generated links will be relative to this */ !}
-               
-               <title>JsDoc Reference - {+data.alias+}</title>
-               
-               
-       <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />            
-       <link rel="stylesheet" type="text/css" href="../default.css" />
-       
-       
-       <script type="text/javascript" src="../page.js">
-       
-       </script>
-        
-               
-       </head>
-
-       <body onload="RooDocsPage.onload();">
-        
-       
-<div class="body-wrap">
-
-    <!-- ============================== links to methods. ================================= -->        
-
-    <div class="top-tools">
-    <!--
-        <a class="inner-link" href="#{+data.alias+}-props"><img src="resources/s.gif" class="item-icon icon-prop">Properties</a>
-        <a class="inner-link" href="#{+data.alias+}-methods"><img src="resources/s.gif" class="item-icon icon-method">Methods</a>
-        <a class="inner-link" href="#{+data.alias+}-events"><img src="resources/s.gif" class="item-icon icon-event">Events</a>
-        <a class="inner-link" href="#{+data.alias+}-configs"><img src="resources/s.gif" class="item-icon icon-config">Config Options</a>
-        <a class="bookmark" href="NEED_TO_CREATE_DIRECT_LINK_HREF"><img src="resources/s.gif" class="item-icon icon-fav">Direct Link</a>
-       -->
-    </div>
-
-    
-<!-- ============================== inheritance Block. ================================= -->   
-       <if test="data.augments.length">
-               <div class="inheritance res-block">
-                  <pre class="res-block-inner">{!
-                               var iblock_indent = 0;
-                                data.augments.reverse().map(
-                                       function($) {  
-                                               output += iblock_indent ? ('<img src="../../images/default/s.gif" height="1" width="' + 
-                                                       iblock_indent + '"/><img src="../../images/default/tree/elbow-end.gif" class="elbow"/>') : '';
-                                               output += new Link().toSymbol($) + "\n"; 
-                                               iblock_indent += 20;
-                                       }
-                               )
-                       !}<img src="../../images/default/s.gif" height="1"  width="{+ iblock_indent +}"/><img class="elbow" src="../../images/default/tree/elbow-end.gif"/>{+data.alias+} 
-
-                  </pre>
-               </div>
-       </if>
-<!-- ============================== class title / details ============================ -->
-    
-    {! 
-                       var fullpath = data.alias.split('.');
-                       var cls = fullpath.pop();
-                       var packge = fullpath.join(".");
-                        
-                       
-                       
-       !}
-    <h1 class="classTitle">
-                               {!
-                                       var classType = "";
-                                       
-                                       if (data.isBuiltin()) {
-                                               classType += "Built-In ";
-                                       }
-                                       
-                                       if (data.isNamespace) {
-                                               if (data.is('FUNCTION')) {
-                                                       classType += "Function ";
-                                               }
-                                               classType += "Namespace ";
-                                       }
-                                       else {
-                                               classType += "Class ";
-                                       }
-                               !}
-                               {+classType+}{+data.alias+}
-                       </h1>
-                       
-    <table cellspacing="0" class="class-summary-table">
-       <if test="packge.length">
-               <tr><td class="label">Package:</td><td class="hd-info">{+packge+}</td></tr>
-       </if>
-        <tr><td class="label">Defined In:</td><td class="hd-info">
-                       <if test="data.srcFile.length">{# isn't defined in any file #}
-                                       {+new Link().toSrc(data.srcFile)+}.
-                       </if>
-       </td></tr>
-        <tr><td class="label">Class:</td><td class="hd-info">{+cls+}</td></tr>
-       
-       <if test="data.childClasses.length">
-        <tr><td class="label">Subclasses:</td><td class="hd-info">
-               {+
-                       data.childClasses
-                       .sort()
-                       .map(
-                               function($) { return new Link().toSymbol($); }
-                       )
-                       .join(", ")
-               +}
-
-       
-       
-       </td></tr>
-       </if>
-       <if test="data.augments.length">
-       
-               <tr><td class="label">Extends:</td><td class="hd-info">
-                       {+
-                               new Link().toSymbol(data.augments[data.augments.length -1])
-                               
-                       +}
-       
-               </td></tr>    
-       </if>
-       
-    </table>
-
-    
-<!-- ============================== class summary ========================== -->                       
-    <div class="description">
-       {+resolveLinks(data.desc)+}
-    </div>
-
-       
-<!-- ============================== Class comment block... ========================== -->                                      
-
-<div class="comments">
-       <b>Class Comments / Notes</B> =>  
-       <u onclick="parent.CommentDialog.showCommentId = '{+data.alias+}';">[Add Your comment/notes about this class]</u>
-       <br/>
-       <iframe frameborder="0"  id="comments-{+data.memberOf+}" style="border: none;width:100%;" 
-               src="/blog.php/GtkDjsComments/{+data.alias+}.html"></iframe>
-</div>
-       
-
-               
-<!-- ============================== config options ========================== -->                                              
-                
-    
-    {!
-       
-        
-        
-       var cfgProperties = [];
-       if (!data.comment.getTag('singleton').length) {
-               cfgProperties = data.configToArray();
-               cfgProperties = cfgProperties.sort(makeSortby("name"));
-               
-       }
-       
-               
-               
-       !}
-               
-    <div class="hr"></div>
-    <a id="{+data.alias+}-configs"></a>
-               
-    <if test="!cfgProperties.length">
-    
-     <table cellspacing="0" class="member-table">
-      <caption class="Empty">Config Options - Has None</caption>
-     </table>
-    
-    </if>
-     
-    <if test="cfgProperties.length">
-       
-      <table cellspacing="0" class="member-table">   
-      <caption>Config Options (Usually are also Properties)</caption>
-    
-       
-        <tr>
-            <th class="sig-header" colspan="2">Options</th>
-           
-            <th class="msource-header">Defined By</th>
-        </tr>
-       
-       
-       
-       <for each="dtag" in="cfgProperties">
-       
-               <tr class="config-row expandable config-row-alt{+$dtag_i % 2+}{+ ((dtag.memberOf == data.alias) ?   " notInherited" : "") +}">
-                  <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
-                   <td class="sig">
-
-                       <a id="{+dtag.memberOf+}-cfg-{+dtag.name+}" name=".{+dtag.name+}"></a>
-                       <div class="fixedFont">
-                               <b  class="itemname">{+dtag.name+}</b> : {+((dtag.type) ? (new Link().toSymbol(dtag.type)) : "" )+}
-                               
-                               
-                       </div>
-                 
-                       <div class="mdesc">
-                           <div class="short">{+resolveLinks(summarize(dtag.desc))+}</div> 
-                       </div>
-                       
-                       <div class="mdesc">
-                           <div class="long">{+resolveLinks(dtag.desc)+}</div> 
-                       </div>
-                       
-                       
-
-                   </td>
-                   <td class="msource">
-                       {# - fixme - add inheritied as link here #}
-                       {+ (dtag.memberOf == data.alias) ? dtag.memberOf :  new Link().toSymbol(dtag.memberOf) +}
-                               
-                   </td>
-               </tr>
-        </for>
-        
-    </table>
-  </if>                
-  
-  
-  
-  
-  
-  
-  
-  
-  <!-- ============================== public properties ==================== -->       
-  
-  
-  
-    <a id="{+data.alias+}-props"></a>      
-    
-    {! 
-               var ownProperties = [];
-               var psorted = data.properties.sort(makeSortby("name"));
-               psorted.filter(
-                       
-                       function($){
-                               if (/$.hide/.test($.desc)) {
-                                       return false;
-                               }
-                               if ( !$.isNamespace || (($.memberOf != data.alias) && $.isStatic)) {
-                                       if ($.isStatic)  ownProperties.push($);
-                               }
-                               return true;
-               
-                       }
-               );
-     
-    !}
-
-    <if test="!ownProperties.length">
-    
-     <table cellspacing="0" class="member-table">
-      <caption class="Empty">Public Properties - Has None</caption>
-     </table>
-    
-    </if>
-     
-    <if test="ownProperties.length">
-       
-      <table cellspacing="0" class="member-table">   
-      <caption>Public Properties </caption>
-        <tr>
-            <th class="sig-header" colspan="2">Property</th>
-           <th class="sig-header">Description</th>
-            <th class="msource-header">Defined By</th>
-        </tr>
-        
-      
-                    
-         
-       <for each="member" in="ownProperties">   
-        
-       
-       
-          <tr class="property-row config-row-alt{+$member_i % 2+}{!
-
-               if (member.memberOf == data.alias) {
-                       output += " notInherited";
-                }
-                 
-                !}">
-            <td class="micon">
-                <a class="exi" href="#expand">&nbsp;</a>
-            </td>
-            <td class="sig">
-               <a id="{+member.memberOf+}-prop-{+member.name+}" name=".{+member.name+}"></a>
-              <div class="fixedFont">
-                   <span class="attributes">{!
-                       if (member.isPrivate) output += "&lt;private&gt; ";
-                       if (member.isInner) output += "&lt;inner&gt; ";
-                       
-                       if (member.isConstant) output += "&lt;constant&gt; ";
-                       if (member.isStatic) output += ""+data.alias +".";
-                    !}</span><b  class="itemname">{+member.name+}</b> :
-                    <span type="etype">{+((member.type) ? (new Link().toSymbol(member.type)) : "" )+}</span>
-                    </div>
-           </td>
-           <td class="sig">
-               <div class="mdesc">
-
-
-                  <div class="short">
-                       {+resolveLinks(summarize(member.desc))+}
-                  
-                  
-                  
-                  </div> 
-                   
-                    <div class="long">
-                   
-                       {+resolveLinks(member.desc)+}                        
-                
-                </div>
-                </div>
-            </td>
-           
-            <td class="msource">  
-           {+ (member.memberOf == data.alias) ? member.memberOf :  new Link().toSymbol(member.memberOf) +}
-           </td>             
-                
-          </tr>
-        </for>
-        
-        
-       
-      
-        <!-- TODO: implement this alt row.  also notice non-linked "Defined by" when property is a part of this class.     
-        <tr class="property-row alt">
-             
-        -->
-
-    </table>
-  
-    </if>
-  <!-- ============================== methods summary / details ======================== -->
-  
-  
-  <a id="{+data.alias+}-methods"></a>
-       <!-- constructor?? -->
-       {! 
-               var ownMethods = [];
-       
-               if (data.comment.getTag('class').length && 
-                       !data.isBuiltin() && 
-                       !data.comment.getTag('singleton').length &&
-                       !data.comment.getTag('static').length
-                       ) {
-                       data.isInherited = false;
-                       ownMethods.push(data);
-               }
-               
-               var msorted = data.methods.sort(makeSortby("name"));
-       !}
-       <!-- static's first 
-       
-       
-       -->
-       {!
-               msorted.filter(
-                               function($){
-                                       
-                                       if (/@hide/.test($.desc)) {
-                                               return false;
-                                       }
-                                       
-                                       if (!$.isEvent && (data.comment.getTag("instanceOf").length || data.comment.getTag("singleton").length)) {
-                                               if ($.isStatic && (data.comment.getTag("instanceOf").length || data.comment.getTag("singleton").length) &&
-                                                       ($.memberOf != data.alias)) {
-                                                               return true;
-                                                       }
-                                               $.isInherited = ($.memberOf != data.alias);
-                                               ownMethods.push($);
-                                               return true;
-                                       }
-                                       
-                                       
-                                       if ($.isNamespace || $.isEvent || (($.memberOf != data.alias) && $.isStatic)){
-                                               return true;
-                                       }
-                                       if ($.isStatic) {
-                                               $.isInherited = ($.memberOf != data.alias);
-                                               ownMethods.push($);
-                                       }
-                                       
-                                       return true;
-                               }
-                       );
-       !}
-       <!-- then dynamics first -->
-       {!      
-               msorted.filter(
-                               function($){
-                                       if (/@hide/.test($.desc)) {
-                                               return false;
-                                       }
-                                       if (data.comment.getTag("instanceOf").length  || data.comment.getTag("singleton").length) {
-                                               return true;
-                                       }
-                                       if ($.isNamespace || $.isEvent || (($.memberOf != data.alias) && $.isStatic)){
-                                               
-                                               return true;
-                                       }
-                                       if (!$.isStatic) {
-                                               $.isInherited = ($.memberOf != data.alias);
-                                               ownMethods.push($);
-                                       }
-                                       
-                                       return true;
-                               }
-                       );
-                
-       !}
-  
-  
-    <if test="!ownMethods.length">
-    
-     <table cellspacing="0" class="member-table">
-      <caption class="Empty">Public Methods - Has None</caption>
-     </table>
-    
-    </if>
-    <if test="ownMethods.length">
-    
-      <table cellspacing="0" class="member-table">
-      <caption>Public Methods</caption>
-        <tr>
-            <th class="sig-header" colspan="2">Method</th>            
-            <th class="msource-header">Defined By</th>
-
-        </tr>
-        
-       
-       
-        
-       
-        <for each="member" in="ownMethods">
-         
-          <tr class="method-row config-row-alt{+$member_i % 2+}{!
-                 if (member.is("CONSTRUCTOR") && !member.params.length) {
-                         output += '';
-                } else {
-                         output += ' expandable';
-                       }
-                 
-                 
-               if (!member.isInherited) {
-                       output += " notInherited";
-                }
-                 
-                !}">
-            <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
-          
-          
-            <td class="sig">
-                <a id="{+member.memberOf+}-method-{+member.name+}"   name=".{+member.name+}"></a>
-               <div class="fixedFont">
-                       <span class="attributes">{!
-                                       if (member.is('CONSTRUCTOR')) {
-                                               output += "new <B>" + member.memberOf + (member.memberOf.length ? "." : "") +"</B>";
-                                       } else {
-                                               
-                                               
-                                               if (member.isPrivate) output += "&lt;private&gt; ";
-                                               if (member.isInner) output += "&lt;inner&gt; ";
-                                               if (member.isStatic || data.comment.getTag("singleton").length || data.comment.getTag("instanceOf").length) {
-                                                       output +=  data.alias + ".";    
-                                               }
-                                       }
-                               !}</span><b class="itemname">{+member.name+}</b>
-                               
-                                {+makeSignature(member.params)+} 
-                       
-                               <if test="member.returns.length">
-                                        : 
-                                       <for each="item" in="member.returns">
-                                               <if test="$item_i > 0"> or </if>
-                                               {+((item.type) ? (new Link().toSymbol(item.type)) : "" )+}
-                                       
-                                       </for>
-                                       
-                               </if>
-                       
-               </div>
-                <div class="mdesc">
-               <if test="!member.is('CONSTRUCTOR')">
-                   <div class="short">{+resolveLinks(summarize(member.desc))+}</div> 
-                </if>
-                <if test="member.is('CONSTRUCTOR')">
-                       <div class="short">Create a new {+data.alias +}</div> 
-                </if>
-                
-                    <div class="long">
-                       <if test="!member.is('CONSTRUCTOR')">
-                               {+resolveLinks(member.desc)+}
-                   
-                               <if test="member.example">
-                                       <pre class="code">{+member.example+}</pre>
-                               </if>
-                       </if>
-                       
-                       <if test="member.is('CONSTRUCTOR')">
-                               Create a new {+data.alias +}
-                       </if>
-                       <if test="member.params.length">
-                               <dl class="detailList">
-                               <dt class="heading">Parameters:</dt>
-                               <for each="item" in="member.params">
-                                       <dt>
-                                               {+((item.type)?"<span class=\"fixedFont\">"+(new Link().toSymbol(item.type))+"</span> " : "")+} <b>{+item.name+}</b>
-                                               <if test="item.isOptional"><i>Optional
-                                                       <if test="item.defaultValue">, 
-                                                       Default: {+item.defaultValue+}
-                                               </if></i></if>
-                                       </dt>
-                                       <dd>{+resolveLinks(item.desc)+}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.deprecated">
-                               <dl class="detailList">
-                               <dt class="heading">Deprecated:</dt>
-                               <dt>
-                                       {+member.deprecated+}
-                               </dt>
-                               </dl>
-                       </if>
-                       <if test="member.since.length">
-                               <dl class="detailList">
-                               <dt class="heading">Since:</dt>
-                                       <dd>{+ member.since +}</dd>
-                               </dl>
-                               </dl>
-                       </if>
-                       <if test="member.exceptions.length">
-                               <dl class="detailList">
-                               <dt class="heading">Throws:</dt>
-                               <for each="item" in="member.exceptions">
-                                       <dt>
-                                               {+((item.type)?"<span class=\"fixedFont\">{"+(new Link().toSymbol(item.type))+"}</span> " : "")+} <b>{+item.name+}</b>
-                                       </dt>
-                                       <dd>{+resolveLinks(item.desc)+}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.returns.length">
-                               <dl class="detailList">
-                               <dt class="heading">Returns:</dt>
-                               <for each="item" in="member.returns">
-                                       <dd>{+((item.type)?"<span class=\"fixedFont\">"+(new Link().toSymbol(item.type))+"</span> " : "")+} {+resolveLinks(item.desc)+}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.requires.length">
-                               <dl class="detailList">
-                               <dt class="heading">Requires:</dt>
-                               <for each="item" in="member.requires">
-                                       <dd>{+ resolveLinks(item) +}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.see.length">
-                               <dl class="detailList">
-                               <dt class="heading">See:</dt>
-                               <for each="item" in="member.see">
-                                       <dd>{+ new Link().toSymbol(item) +}</dd>
-                               </for>
-                               </dl>
-                       </if>
-
-                   
-                   
-                    
-                    </div>                    
-                </div>
-
-            </td>
-            <td class="msource">
-               <if test="!member.is('CONSTRUCTOR')">
-                       {+ (member.memberOf == data.alias) ? member.memberOf :  new Link().toSymbol(member.memberOf) +}
-               </if>&nbsp;
-            </td>
-        </tr>
-       </for>
-                                                      
-    </table>
-</if>
-  
-  <!-- ============================== events summary / details ======================== -->
-  
-  
-  <a id="{+data.alias+}-events"></a>
-    
-  
-       {! 
-               
-               
-               var ownEvents = data.methods.filter(
-                               function($){
-                                       
-                                       return $.isEvent && !$.comment.getTag('hide').length;
-                                               
-                               }
-                       ).sort(makeSortby("name"));
-                
-       !}
-   <if test="!ownEvents.length">
-    
-     <table cellspacing="0" class="member-table">
-      <caption class="Empty">Events - Has None</caption>
-     </table>
-    
-    </if>
-  
-    
-    <if test="ownEvents.length">
-    
-      <table cellspacing="0" class="member-table">
-               <caption>Events</caption>
-             <thead>
-               <tr>
-                   <th class="sig-header" colspan="2">Event</th>            
-                   <th class="msource-header">Defined By</th>
-
-               </tr>
-             </thead>  
-       
-       
-        
-       
-        <for each="member" in="ownEvents">
-          <tr class="method-row expandable config-row-alt{+$member_i % 2+}{!
-
-               if (member.memberOf == data.alias) {
-                       output += " notInherited";
-                }
-                 
-                !}">
-            <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
-           
-            <td class="sig">
-                <a id="{+member.memberOf+}-event-{+member.name+}"></a>
-                
-              <div class="fixedFont">
-               <b class="itemname">{+member.name.substring(1)+}</b> {+makeSignature(member.params)+} 
-               
-               </div>
-
-                <div class="mdesc">
-
-                   <div class="short">{+resolveLinks(summarize(member.desc))+}
-                  
-               </div> 
-                   
-                    <div class="long">
-                   
-                       {+resolveLinks(member.desc)+}
-                   
-                       <if test="member.example">
-                               <pre class="code">{+member.example+}</pre>
-                       </if>
-                       
-               
-                       <if test="member.params.length">
-                               <dl class="detailList">
-                               <dt class="heading">Parameters:</dt>
-                               <for each="item" in="member.params">
-                                       <dt>
-                                               {+((item.type)?"<span class=\"fixedFont\">"+(new Link().toSymbol(item.type))+"</span> " : "")+}<b>{+item.name+}</b>
-                                               <if test="item.isOptional"><i>Optional
-                                                       <if test="item.defaultValue">, 
-                                                       Default: {+item.defaultValue+}
-                                               </if></i></if>
-                                       </dt>
-                                       <dd>{+resolveLinks(item.desc)+}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.deprecated">
-                               <dl class="detailList">
-                               <dt class="heading">Deprecated:</dt>
-                               <dt>
-                                       {+member.deprecated+}
-                               </dt>
-                               </dl>
-                       </if>
-                       <if test="member.since.length">
-                               <dl class="detailList">
-                               <dt class="heading">Since:</dt>
-                                       <dd>{+ member.since +}</dd>
-                               </dl>
-                               </dl>
-                       </if>
-                       <if test="member.exceptions.length">
-                               <dl class="detailList">
-                               <dt class="heading">Throws:</dt>
-                               <for each="item" in="member.exceptions">
-                                       <dt>
-                                               {+((item.type)?"<span class=\"light fixedFont\">{"+(new Link().toSymbol(item.type))+"}</span> " : "")+} <b>{+item.name+}</b>
-                                       </dt>
-                                       <dd>{+resolveLinks(item.desc)+}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.returns.length">
-                               <dl class="detailList">
-                               <dt class="heading">Returns:</dt>
-                               <for each="item" in="member.returns">
-                                       <dd>{+((item.type)?"<span class=\"light fixedFont\">{"+(new Link().toSymbol(item.type))+"}</span> " : "")+}{+resolveLinks(item.desc)+}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.requires.length">
-                               <dl class="detailList">
-                               <dt class="heading">Requires:</dt>
-                               <for each="item" in="member.requires">
-                                       <dd>{+ resolveLinks(item) +}</dd>
-                               </for>
-                               </dl>
-                       </if>
-                       <if test="member.see.length">
-                               <dl class="detailList">
-                               <dt class="heading">See:</dt>
-                               <for each="item" in="member.see">
-                                       <dd>{+ new Link().toSymbol(item) +}</dd>
-                               </for>
-                               </dl>
-                       </if>
-
-                   
-                   
-                    
-                    </div>                    
-                </div>
-
-            </td>
-            <td class="msource">
-                {+ (member.memberOf == data.alias) ? member.memberOf :  new Link().toSymbol(member.memberOf) +}
-            </td>
-        </tr>
-       </for>
-                                                      
-    </table>
-</if>
-  
-  
-  
-<!-- ============================== footer ================================= -->
-               <div class="fineprint" style="clear:both">
-                       <if test="Options.copyright">&copy;{+Options.copyright+}<br /></if>
-                       Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspeciton Doc Generator</a> {+Options.version+} on {+new Date()+}
-                       Based on 
-                       <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a> on {+new Date()+}
-               </div>
-       </body>
-</html>
diff --git a/buildSDK/doc_templates/index.tmpl b/buildSDK/doc_templates/index.tmpl
deleted file mode 100644 (file)
index 327e81c..0000000
+++ /dev/null
@@ -1,63 +0,0 @@
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <title>RooJS(1) Generated Documentation</title>
-</head>
-
-
-<html>
-<head>
-  <title>RooJS (1) - Manual</title>
-   
-
-    <!--
-    <link rel="stylesheet" type="text/css" href="http://www.akbkhome.com/extjs/resources/css/ytheme-aero.css" />
-    <script type="text/javascript" src="http://www.akbkhome.com/extjs/adapter/yui/yui-utilities.js"></script>     
-    <script type="text/javascript" src="http://www.akbkhome.com/extjs/adapter/yui/ext-yui-adapter.js"></script> 
-
-    <script type="text/javascript" src="http://www.akbkhome.com/extjs/ext-all.js"></script>
-    -->
-    <link rel="stylesheet" type="text/css" href="../css/roojs.css" />
-    <script type="text/javascript" src="../roojs-all.js"></script>     
-<script type="text/javascript">
-Ext = Roo;
-</script>
-   
-    <link rel="stylesheet" type="text/css" href="../css/highlight-js.css" />
-   
-    <script type="text/javascript" src="./doc.js"></script>
-<link rel="stylesheet" type="text/css" href="./default.css" />
-
-
-<script type="text/javascript">   
-    
-var baseURL = ".";   
-
-Ext.BLANK_IMAGE_URL =  "../images/gray/s.gif";
-
-
-</script>
-
-<div class="x-layout-inactive-content">
-
-
-<ul id="classlist">
-
-       <for each="thisClass" in="data">
-       <li><div 
-               roo:isc="{+ (thisClass.isNamespace || (thisClass.comment && thisClass.comment.getTag('class').length && !thisClass.isBuiltin())) ? "yes": "no" +}"
-               roo:isns="{+ thisClass.isNamespace ? "yes": "no" +}">{+thisClass.alias+}</div>
-       
-       </li>
-       </for>  
-       </ul>   
-</div>         
-
-
-</html>
-
-               
-                        
\ No newline at end of file
diff --git a/buildSDK/doc_templates/symbol.tmpl b/buildSDK/doc_templates/symbol.tmpl
deleted file mode 100644 (file)
index f8f4bd1..0000000
+++ /dev/null
@@ -1,35 +0,0 @@
-<symbol alias="{+data.alias+}">
-       <name>{+data.name+}</name>
-       <memberOf>{+data.memberOf+}</memberOf>
-       <isStatic>{+data.isStatic+}</isStatic>
-       <isa>{+data.isa+}</isa>
-       <desc>{+data.desc+}</desc>
-       <classDesc>{+data.classDesc+}</classDesc>
-       
-       <methods><for each="method" in="data.methods">
-               <method>
-                       <name>{+method.name+}</name>
-                       <memberOf>{+method.memberOf+}</memberOf>
-                       <isStatic>{+method.isStatic+}</isStatic>
-                       <desc>{+method.desc+}</desc>
-                       <params><for each="param" in="method.params">
-                               <param>
-                                       <type>{+param.type+}</type>
-                                       <name>{+param.name+}</name>
-                                       <desc>{+param.desc+}</desc>
-                                       <defaultValue>{+param.defaultValue+}</defaultValue>
-                               </param></for>
-                       </params>
-               </method></for>
-       </methods>
-       
-       <properties><for each="property" in="data.properties">
-               <property>
-                       <name>{+property.name+}</name>
-                       <memberOf>{+property.memberOf+}</memberOf>
-                       <isStatic>{+property.isStatic+}</isStatic>
-                       <desc>{+property.desc+}</desc>
-                       <type>{+property.type+}</type>
-               </property></for>
-       </properties>
-</symbol>
diff --git a/docs/default.css b/docs/default.css
new file mode 100644 (file)
index 0000000..04ce73f
--- /dev/null
@@ -0,0 +1,415 @@
+/* default.css 
+/<style>
+/ */
+body
+{
+       font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+       /* width: 800px; */
+}
+
+.header
+{
+       clear: both;
+       background-color: #ccc;
+       padding: 8px;
+}
+
+h1
+{
+       font-size: 150%;
+       font-weight: bold;
+       padding: 0;
+       margin: 1em 0 0 .3em;
+}
+
+hr
+{
+       border: none 0;
+       border-top: 1px solid #7F8FB1;
+       height: 1px;
+}
+
+pre.code
+{
+       display: block;
+       padding: 8px;
+       border: 1px dashed #ccc;
+}
+
+#index
+{
+       margin-top: 24px;
+       float: left;
+       width: 160px;
+       position: absolute;
+       left: 8px;
+       background-color: #F3F3F3;
+       padding: 8px;
+}
+
+#content
+{
+       margin-left: 190px;
+       width: 600px;
+}
+
+.classList
+{
+       list-style-type: none;
+       padding: 0;
+       margin: 0 0 0 8px;
+       font-family: arial, sans-serif;
+       font-size: 1em;
+       overflow: auto;
+}
+
+.classList li
+{
+       padding: 0;
+       margin: 0 0 8px 0;
+}
+
+.summaryTable { width: 100%; }
+
+h1.classTitle
+{
+       font-size:170%;
+       line-height:130%;
+}
+
+h2 { font-size: 110%; }
+
+/* --------- the labels at the top of the page... -------- */
+.class-summary-table .label
+{
+    vertical-align: top;
+    margin-bottom: 4px;
+}
+
+.class-summary-table 
+{
+    margin-left:10px;
+    margin-top:5px;
+    
+}
+.class-summary-table  td
+{
+    font-size:12px;
+    padding:2px 10px 2px 2px;
+}
+.elbow
+{
+    vertical-align: middle;
+    padding-right: 2px;
+   }
+    
+/** ---------------------   Caption above tables -----------------------**/
+caption.Empty,
+caption, 
+div.sectionTitle
+{
+       background-color: #7F8FB1;
+       color: #fff;
+       font-size:130%;
+       text-align: left;
+       padding: 2px 6px 2px 6px;
+       border: 1px #7F8FB1 solid;
+    width: 100%;
+    font-weight: bold;
+}
+
+div.sectionTitle { margin-bottom: 8px; }
+.summaryTable thead { display: none; }
+
+.summaryTable td
+{
+       vertical-align: top;
+       padding: 4px;
+       border-bottom: 1px #7F8FB1 solid;
+       border-right: 1px #7F8FB1 solid;
+}
+
+/*col#summaryAttributes {}*/
+.summaryTable td.attributes
+{
+       border-left: 1px #7F8FB1 solid;
+       width: 140px;
+       text-align: right;
+}
+
+td.attributes, .fixedFont
+{
+       line-height: 15px;
+/*     color: #002EBE; */
+       font-family: "Courier New",Courier,monospace;
+       font-size: 13px;
+    margin-left: 10px;
+}
+.itemname
+{
+    color: #002EBE; 
+}
+
+
+.summaryTable td.nameDescription
+{
+       text-align: left;
+       font-size: 13px;
+       line-height: 15px;
+}
+
+.summaryTable td.nameDescription, .description
+{
+       font: 13px Palatino,Garamond,serif;
+       line-height: 15px;
+       padding: 4px;
+       padding-left: 4px;
+}
+
+.summaryTable { margin-bottom: 8px; }
+
+ul.inheritsList
+{
+       list-style: square;
+       margin-left: 20px;
+       padding-left: 0;
+}
+
+.detailList {
+       margin-left: 20px; 
+    padding-top: 10px;
+       line-height: 20px;
+    clear: left;
+}
+.detailList dt 
+{ 
+    margin-left: 20px; 
+    clear: left;
+    float: left;
+    
+}
+
+.detailList .heading
+{
+       font-weight: bold;
+       padding-bottom: 6px;
+       margin-left: 0;
+    
+}
+
+.light, td.attributes, .light a:link, .light a:visited
+{
+       color: #777;
+       font-style: italic;
+}
+
+.fineprint
+{
+       text-align: right;
+       font-size: 10px;
+}
+
+.detailList dd
+{
+    clear: none;
+    float: left;
+    margin-left: 10px;
+    
+    
+}
+
+
+.detailList dt 
+{
+    
+    
+    margin-bottom::    12px;
+    margin-left:       20px;
+}
+/** ----------------------- RooJS extra stuff  ----------------------- */
+
+.body-wrap {
+    margin: 5px;
+}
+
+.top-tools  {
+    text-align:right;
+}
+.inner-link {
+    margin-left: 10px;
+}
+.inheritance {
+    float:right;
+    margin-top:20px;
+    width:300px;
+}
+.res-block {
+    margin-bottom:15px;
+    padding-top:5px;
+   /* width:210px; */
+}
+.inheritance pre {
+    border:0pt none;
+    font-size:11px;
+    /* line-height:18px !important; */
+    margin:0pt;
+    padding:0pt 8px 5px !important;
+    text-align:left;
+    background-color: #f8f8f8;
+}
+div.hr { 
+    background:#CCCCCC none repeat scroll 0%;
+    height:1px;
+    line-height:1px;
+    margin:5px 0pt;
+    overflow:hidden;
+        clear: both;
+}
+/** ----------------------- RooJS table stuff  ----------------------- */
+
+.member-table {
+    margin-bottom:10px;
+    width:100%;
+}
+
+.member-table th { 
+    background-color:#eee;
+    border-left:1px solid #EEE;
+    border-right:1px solid #DDD;
+    border-top:1px solid #EEE;
+    padding:3px;
+    text-align:left;
+    vertical-align:middle;
+    
+    
+    font-size:11px;
+    white-space:nowrap;
+    
+}
+
+.member-table td.micon {
+    background:#F9F9F9;
+    border-right:1px solid #D0D0D0;
+    padding:0px;
+    width:16px;
+}
+
+.member-table td.micon a {
+   
+    display:block;
+    
+    text-decoration: none;
+    
+     height:18px;
+    width:16px;
+}
+
+.member-table td.micon,
+.member-table td.sig, 
+.member-table td.msource {
+    border-top:1px solid #D0D0D0;
+    vertical-align:top;
+    padding: 5px;
+    font-size: 13px;
+}
+.expanded .mdesc .short{ 
+    display:none;
+}
+.expanded .mdesc .comments,
+.expanded .mdesc .long { 
+    display:block;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+
+.mdesc .comments,
+.mdesc .long { 
+    display:none;
+}
+.mdesc .short { 
+    color: #666;
+    margin-left: 10px;
+}
+
+.expandable td.micon a {
+    background:transparent url(http://devel.akbkhome.com/extjs/resources/images/default/tree/elbow-plus-nl.gif) no-repeat scroll 0px 0px;
+    cursor:pointer}
+
+.expanded  td.micon a {
+    background:transparent url(http://devel.akbkhome.com/extjs/resources/images/default/tree/elbow-minus-nl.gif) no-repeat scroll 0px 0px;
+    cursor:pointer;
+
+}
+
+
+/* ---- table with no contents */
+
+caption.Empty 
+{
+    background-color:#EEEEEE;
+    border:medium none;
+    color:#666666;
+    font-size:10pt;
+    font-style:italic;
+    font-weight: normal;
+}
+
+
+/* fix up lists back to normal */
+
+
+.body-wrap ul 
+{
+    ist-style-image:   none;
+    list-style-position:       outside;
+    list-style-type:   disc;
+    padding-left: 40px;
+}
+
+.long pre,
+.description pre  {
+    background:#F8F8F8 none repeat scroll 0% 0%;
+    border-color:#ccc;
+    border-style:solid;
+    border-width:1px 1px 1px 5px;
+    font-size:12px !important;
+    line-height:14px !important;
+    margin:10px 10px 10px 0px;
+    padding:10px;
+}
+
+
+.comments {
+    background:#F8F8F8 none repeat scroll 0% 0%;
+    border-color:#f30;
+    border-style:solid;
+    border-width:1px 15px 1px 15px;
+    font-size:12px !important;
+    line-height:14px !important;
+    margin:10px 10px 10px 0px;
+    padding:10px;
+    width:95%;
+    float:left;
+    
+}
+
+
+/** methods etc. defined in this class are highlighted. **/
+
+/** -------- alternating rows.. ---- */
+
+.config-row-alt0 {
+    background-color : #f8f8f8;
+}
+.notInherited td.micon,
+.notInherited td.msource
+{
+    
+    background-color: #fcc; 
+    /*border: 1px solid red; */
+}
+td.msource 
+{
+    width: 160px;
+}
diff --git a/docs/doc.js b/docs/doc.js
new file mode 100644 (file)
index 0000000..7a73e74
--- /dev/null
@@ -0,0 +1,613 @@
+//<script type="text/javascript">
+
+
+Roo.onReady(function(){
+
+    Roo.QuickTips.init();
+      MainBody.init();
+   
+    
+    
+});
+MainBody = {
+    layout: false,
+    cookie: false,
+    init: function() 
+    {
+        
+        this.cookie = new Roo.state.CookieProvider({})
+        
+        MainBody.layout = new Roo.BorderLayout(document.body, {
+            north: {
+                split:true,
+                initialSize: 30,
+                titlebar: false,
+                collapsible: false
+                
+            },
+            west: {
+                split:true,
+                initialSize: 200,
+                titlebar: true,
+                collapsible: true
+                
+            },
+            center: {
+                autoScroll: false,
+                titlebar: true,
+                resizeTabs:true,
+                minTabWidth: 100,
+                preferredTabWidth:250
+            }
+        });
+        var layout = MainBody.layout;
+        MainBody.layout.beginUpdate();
+        var hd = this.layout.getEl().createChild( {
+                tag:'div' , 
+                style: 'background-colour:#000; font-weight: bold;' + 
+                    'font-size:16px;'  +
+                    'font-family:Arial,Verdana,\'Bitstream Vera Sans\',Helvetica,sans-serif;', 
+                html: '<img src="../images/roojs_logo.jpg" height="25" align="right"/>' + 
+                    '<div style="margin-left:10px;margin-top:3px;">Roo Version 1.1.2 - Documentation</div>'
+        });
+        layout.add('north', new Roo.ContentPanel(hd, {fitToFrame:true, closable:false }));
+         
+        //innerLayout.add('south', new Roo.ContentPanel('inner1', "More Information"));
+        //innerLayout.add('center', new Roo.ContentPanel('inner2')); // right bottom Tree
+        
+         
+        //alert("initing");
+       
+        ClassTree.init();
+        
+        //var frame = this.layout.getEl().createChild({ tag:'div' , frameborder: "no"});
+        var frame = this.layout.getEl().createChild({ tag:'iframe' , id:'viewFrame', name:'viewFrame',frameborder: "no"});
+                   
+                   
+     
+        
+        this.preview = new Roo.ContentPanel(frame, {title: 
+            '&nbsp;<a target="viewFrame" href="/roojs1/buildSDK/indexPage.html">Contents / Examples</a>' + 
+            ' | Class Details',
+            fitToFrame:true,
+            autoScroll: true
+        });
+        
+        //// ---- HANLE CLICKS ON OUR CHILD PAGE???
+        /*
+        this.preview.getEl().on('click', function(e, target)
+        {
+            //console.log("click pressed?");
+            
+            if(target = e.getTarget('a:not(.exi)', 3)) {
+                var cls = Roo.fly(target).getAttributeNS('roo', 'cls');
+                e.stopEvent();
+                if(cls){
+                    var member = Roo.fly(target).getAttributeNS('roo', 'member');
+                    //this.loadClass(target.href, cls, member);
+                    
+                    if (/^src\//.test(cls)) {
+                        cls = cls.replace(/.js$/, ''); // get rid of .js for source links..
+                    }
+                    
+                    
+                    MainBody.loadPage("symbols/"+ cls +".html");
+                    return;
+                }
+                if(target.className == 'inner-link'){ // go to #
+                    this.getActiveTab().scrollToSection(target.href.split('#')[1]);
+                    return;
+                }
+                window.open(target.href);
+                
+                return; // no more...
+            }
+            if(target = e.getTarget('.micon', 2)){
+                
+                e.stopEvent();
+                var tr = Roo.fly(target.parentNode);
+                if(tr.hasClass('expandable')){
+                    tr.toggleClass('expanded');
+                }
+            }
+          
+        });
+        */
+         
+        window.setInterval(function() {
+            // check 
+            //console.log("check");
+                if (CommentDialog.showCommentId.length) {
+                    var id  = '' + CommentDialog.showCommentId;
+                    if (Roo.isSafari) {
+                        Roo.get(document.getElementsByTagName('iframe')[0]).setVisible(false);
+                    }
+                   // alert(id);
+                    CommentDialog.showCommentId= '';
+                    
+                    
+                    
+                    CommentDialog.show(id);
+                }
+            }, 500); // check every half second..
+        
+        
+        
+        
+        var cp = this.layout.add('center',   this.preview);
+        MainBody.loadPage("/roojs1/buildSDK/indexPage.html");
+        
+        
+        MainBody.layout.endUpdate();
+      
+        CommentDialog.build();
+        
+        Roo.get(document.getElementsByTagName('iframe')[0]).setVisibilityMode(Roo.Element.DISPLAY);
+        
+    },
+    
+    
+    loadPage: function(src) {
+        this.preview.el.dom.src = src;
+
+        //this.preview.load(src);
+    } 
+    
+    
+}
+
+
+ClassTree = {
+    tree: false,
+    
+    init : function () 
+    {
+        if (this.tree) {
+            return;
+           }
+        
+        var ct = MainBody.layout.getEl().createChild({tag:'div'});
+        var viewEl = ct.createChild({tag:'div'});
+        var folders = MainBody.layout.add('west', 
+            new Roo.ContentPanel(ct, {
+                title:'Tree', 
+                fitToFrame:true,
+                autoScroll:true,
+                autoCreate:true,
+               // toolbar: tb,
+                resizeEl:viewEl
+            }));
+        this.tree = new Roo.tree.TreePanel(viewEl, {
+            animate:true, 
+            enableDD:false,
+            containerScroll: true,
+            ddGroup: 'organizerDD',
+            rootVisible:false,
+            listeners : {
+                
+                click : function(node, e) {
+                    // do stuff.
+                    // load: 
+                    //console.log(node.attributes.openUrl);
+                    if (!node.attributes.openUrl) {
+                        return;
+                    }
+                    MainBody.loadPage("symbols/"+ node.attributes.openUrl  +".html");
+                     
+                    //MainBody.layout.getRegion('center').getPanel(0).setTitle(ClassTree.getTitleHtml(file)); // methods
+                }
+                
+                
+            }
+        });
+        new Roo.tree.TreeSorter(this.tree, {folderSort:true});
+        var root = new Roo.tree.TreeNode({
+            text: '', 
+            allowDrag:false,
+            allowDrop:false
+        });
+        this.tree.setRootNode(root);
+        // loop through 
+        function addNodes(parent, ar, pref) 
+        {
+            for(var nm in ar) {
+                if (nm.substring(0,1) == "_") { // skip desc..
+                    continue;
+                }
+                //console.log("nm : " + nm + " = isNS:"+ar[nm]._isNS + " ? PN:" + nd.getDepth());
+                var hasChildNodes = ar[nm]._hasChildren && (ar[nm]._isNS || (parent.getDepth() < 1));
+                    
+                
+                var nd = new Roo.tree.TreeNode( {
+                        text:pref +nm, 
+                        cls:  'album-node'  ,  
+                        allowDrag:false,
+                        leaf : !hasChildNodes,
+                        openUrl: ar[nm].hasOwnProperty('_full') ? ar[nm]._full : false,
+                        isNS : ar[nm]._isNS
+                });
+                
+                // add a duplacate reference - if it's got children and 
+                /*
+                if (ar[nm]._hasChildren && (!ar[nm]._isNS) {
+                    //console.log("Adding node.." + nm);
+                    var xn = new Roo.tree.TreeNode( {
+                            text:    nm,
+                            cls:  'album-node'  ,  
+                            allowDrag:false,
+                            leaf : true,
+                            openUrl: ar[nm].hasOwnProperty('_full') ? ar[nm]._full : false
+                            
+                            
+                    });    
+                    parent.appendChild(xn);
+                }
+                */
+                parent.appendChild(nd);
+                
+                //if (typeof(ar[nm]) == "object") {
+                
+                if (ar[nm]._hasChildren) {
+                    //console.log("nm : " + nm + " = isNS:"+ar[nm]._isNS + " ? PN:" + nd.getDepth());
+                    
+                    if (hasChildNodes) {
+                        // namespace -- make a tre..
+                        addNodes(nd, ar[nm],'');
+                        
+                        
+                        
+                    } else {
+                        addNodes(parent, ar[nm],  pref + nm + '.');
+                        
+                        
+                        
+                        
+                        
+                    }
+                    
+                }
+            }
+             
+            
+        }
+        ClassTree.load();
+        // class tree comes from outside!!!
+        addNodes(root, ClassTree.nodes,'');
+        
+        this.tree.render();
+        
+        
+        root.eachChild(function(n) { n.expand(); });
+        //new Roo.tree.TreeSorter(this.tree);
+        ///this.tree.expand();
+          
+       },
+    nodes : { },
+    load: function(file)
+    {
+        
+        ClassTree.nodes = { _hasChildren: true, _isNameSpace: true };
+           
+        Roo.get('classlist').select('li').each( function(n) {
+            var dvs = n.select('div');
+            
+            var cn = {
+                name : dvs.item(0).dom.innerHTML,
+                desc : '', //dvs.item(1).dom.innerHTML
+                isNS : dvs.item(0).getAttributeNS('roo','isns') == "yes"
+            }
+            //console.log("ADD: " + cn.name);
+            var nbits = cn.name.split(".");
+            
+            // top is where we stick everything in...
+            
+            var top=  ClassTree.nodes;
+            
+            for (var  i = 0; i < nbits.length; i++) {
+                // is the last one..
+                var nm = nbits[i];
+                
+                if (i == (nbits.length-1)) {
+                    if (top.hasOwnProperty(nm)) {
+                        top[nm]._full = cn.name;
+                        top[nm]._desc = cn.desc;
+                        break; // all done..
+                    }
+                    top._hasChildren =true;
+                    top[nm] = {
+                      ///  _parent : "Object", // not sure abou this bit!!!
+                        _full : cn.name,
+                        _desc : cn.name,
+                        _hasChildren : false ,
+                        _isNS : cn.isNS
+                    }
+                    break;
+                }
+                // not the top.
+                if (top.hasOwnProperty(nm)) {
+                    top = top[nm];
+                    continue;
+                }
+                top[nm] = { _hasChildren : false };
+                top = top[nm];
+            }
+            
+            
+            
+            
+        });
+       
+        //console.log(ClassTree.nodes);
+        
+        
+        
+        // load page into right hand panel....
+    }
+    /*
+    getTitleHtml : function (file)
+    {
+        var bits = file.split(".");
+        // what about 'Gtk/G etc.'
+        if (bits.length < 2) {
+            return file;
+        }
+        // should not really happen..
+        if (!(bits[0] in classtree)) {
+            return file;
+        }
+        if (!(bits[1] in classtree[bits[0]])) {
+            return file;
+        }
+        var parent = classtree[bits[0]][bits[1]]._parent;
+        if (bits.length == 3) {
+            if (!(bits[2] in classtree[bits[0]][bits[1]])) {
+                return file;
+            }
+            parent = classtree[bits[0]][bits[1]][bits[2]]._parent;
+        }
+        
+        // add parent...
+        var ret = "<u onclick=\"ClassTree.load('"+file+"')\">" + file + "</u>&nbsp;&gt;&nbsp;";
+        return ret + ClassTree.getTitleHtml(parent);
+    }
+    */
+    
+    
+}
+     
+     
+     
+     
+     
+     
+     
+
+CommentDialog = {
+    
+    dialog : false,
+    form: false,
+    ids: false,
+    showCommentId: '', /// id of comment to show as scoping on konq/safari is borked
+    show: function (cls) {
+        this.build();
+        this.ids = cls;
+        this.form.reset();
+        this.form.setValues( {
+                "comment[title]" : "General Comment",
+                "comment[wikifile]" : cls
+                });
+        this.form.setValues( MainBody.cookie.state );
+        
+        this.dialog.show();
+        if (this.form.getValues()["comment[author]"].length) {
+            CommentDialog.form.items.items[4].focus();
+        } else {
+            CommentDialog.form.items.items[0].focus();
+        }
+        
+    },
+    build: function ()
+    {
+        
+        if (this.dialog) {
+            return;
+        }
+  
+        this.dialog = new Roo.LayoutDialog(Roo.id(), { 
+                autoCreate: true,
+                modal:true,
+                title: "Add Comment",
+                //autoTabs:true,
+                titlebar: true,
+                
+                modal:true,
+                width:550,
+                height:450,
+                shadow:true,
+                 
+                
+                center:{
+                    autoScroll:false 
+                 
+                } 
+               
+        });
+             
+        this.dialog.addKeyListener(27, this.hide, this);
+        this.dialog.addButton('Cancel', this.hide, this);
+        this.dialog.addButton('Submit', this.submit, this);
+    
+        var layout = this.dialog.getLayout();
+        var cd = this;
+        // create the dialog....
+        this.form = new Roo.form.Form({
+            labelWidth: 160,
+            
+            listeners : {
+                actionfailed : function(f, act) {
+                    cd.dialog.el.unmask();    
+                    Roo.MessageBox.alert("Error", "Saving failed = fix errors and try again");
+                    // we dont do loads....
+                    
+                              
+                },
+                actioncomplete: function(f, act) {
+                     
+                    cd.dialog.el.unmask();    
+                    cd.hide();
+                    cd.form.reset();
+                    //hopefully this hsould work!
+                    var p = parent;
+                    while (p.parent != p) {
+                        p = p.parent;
+                    }
+                    console.log("trying : " + "comments-" + cd.ids);
+                    p.frames[0].document.getElementById("comments-" + cd.ids).contentDocument.location.reload();
+             
+                    // unmask?? 
+                }
+            }
+            
+            
+             
+        });
+            // simple array store
+        var ctypes = new Roo.data.SimpleStore({
+            fields: ['value'],
+            data : [
+                [ "General Comment" ],
+                [ "Example Code" ],
+                [ "Introduction" ],
+                [ "Bug" ]
+            ]
+        });
+        
+       this.form.add( 
+             
+          
+                new Roo.form.TextField({
+                    fieldLabel: 'Your Name',
+                    name: 'comment[author]',
+                    width: 300,
+                    allowBlank:false,
+                    autoCreate: {tag: "input", type: "text", size: "20", autocomplete: "on"} 
+                }),
+                new Roo.form.TextField({
+                    fieldLabel: 'Your Email address',
+                    name: 'comment[email]',
+                    width: 300,
+                    allowBlank:false,
+                    vtype: "email",
+                    autoCreate: {tag: "input", type: "text", size: "20", autocomplete: "on"} 
+                    
+                }),
+                new Roo.form.TextField({
+                    fieldLabel: 'Your Web site (optional)',
+                    name: 'comment[url]',
+                    width: 300,
+                    allowBlank:true,
+                    vtype: "url"
+                }),
+                new Roo.form.ComboBox({
+                    fieldLabel: 'Type of Comment',
+                    name: 'comment[title]',
+                    editable: false,
+                    forceSelection: true,
+                    store: ctypes,
+                    displayField:'value',
+                    typeAhead: false,
+                    mode: 'local',
+                    triggerAction: 'all',
+                    defaultValue: "General Comment",
+                    allowBlank:false,
+                    selectOnFocus:true
+                    
+                }),
+                new Roo.form.TextArea({
+                    fieldLabel: 'Comment',
+                    name: 'comment[body]',
+                    width:300,
+                    growMin:200,
+                    grow: true,
+                    allowBlank:false
+                }),
+                new Roo.form.Hidden({
+                    name: 'comment[wikifile]',
+                    value : ''
+                }),
+                new Roo.form.Hidden({
+                    name: 'jsonRequest',
+                    value : 'yes'
+                })
+                
+                
+        );
+        
+        
+        var ef = layout.getEl().createChild({tag: 'div', style: 'margin: 5px'});
+        ef.dom.style.margin = 10;
+        ef.dom.style.position = "fixed";
+             
+            //console.log("form container");
+            //console.log(ef);
+            
+            
+        
+        var vp = layout.add('center', new Roo.ContentPanel(ef, {
+            autoCreate : true,
+            fitToFrame:true
+        }));
+        
+        this.form.render(ef.dom);
+       
+       
+        
+    
+    },
+    submit: function()
+    {
+        
+        
+        var cd = typeof(CommentDialog) == "undefined" ? parent.CommentDialog : CommentDialog;
+        if (!cd.form.isValid()) {
+            Roo.MessageBox.alert("Error", "Please Fill in all the details");
+            return;
+        }
+        var p = cd.form.getValues();
+        
+        var mb = typeof(MainBody) == "undefined" ? parent.MainBody : MainBody;
+        
+        mb.cookie.set("comment[author]", p["comment[author]"]);
+        mb.cookie.set("comment[email]", p["comment[email]"]);
+        mb.cookie.set("comment[url]", p["comment[url]"]);
+        cd.dialog.el.mask("Saving Data");    
+        
+        
+        cd.form.doAction('submit', {
+                url: '/blog.php/GtkDjsComments/' + cd.ids + '.html',
+                method: 'POST'
+        });
+        
+        
+         
+        
+    },
+    hide : function()
+    {
+        
+        if (Roo.isSafari) {
+            Roo.get(document.getElementsByTagName('iframe')[0]).setVisible(true);  
+        }
+        this.dialog.hide();
+    }
+        
+        
+       
+    
+}
+
+     
+     
+     
+     
+     
\ No newline at end of file
diff --git a/docs/header.html b/docs/header.html
new file mode 100644 (file)
index 0000000..353b735
--- /dev/null
@@ -0,0 +1,2 @@
+<div id="header">
+</div>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644 (file)
index 0000000..59eb3c3
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <title>Generated Javascript Documentation</title>
+</head>
+
+
+<html>
+<head>
+  <title>RooJS (1) - Manual</title>
+       <link rel="stylesheet" type="text/css" href="http://www.akbkhome.com/extjs/resources/css/ext-all.css" />
+
+    
+    <link rel="stylesheet" type="text/css" href="http://www.akbkhome.com/extjs/resources/css/ytheme-aero.css" /><!-- LIBS -->     
+    <script type="text/javascript" src="http://www.akbkhome.com/extjs/adapter/yui/yui-utilities.js"></script>     
+    <script type="text/javascript" src="http://www.akbkhome.com/extjs/adapter/yui/ext-yui-adapter.js"></script>     <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="http://www.akbkhome.com/extjs/ext-all.js"></script>
+    <script type="text/javascript" src="./doc.js"></script>
+<link rel="stylesheet" type="text/css" href="./default.css" />
+
+<script type="text/javascript">
+   
+    
+var baseURL = ".";   
+Ext.BLANK_IMAGE_URL =  "http://www.akbkhome.com/extjs/resources/images/gray/s.gif";
+</script>
+</html>
\ No newline at end of file
diff --git a/docs/page.js b/docs/page.js
new file mode 100644 (file)
index 0000000..3f27f9d
--- /dev/null
@@ -0,0 +1,242 @@
+//<script type="text/javascript">
+/* -- IE kludge as usual! */
+if (!Array.prototype.indexOf)
+{
+  Array.prototype.indexOf = function(elt /*, from*/)
+  {
+    var len = this.length;
+
+    var from = Number(arguments[1]) || 0;
+    from = (from < 0)
+         ? Math.ceil(from)
+         : Math.floor(from);
+    if (from < 0)
+      from += len;
+
+    for (; from < len; from++)
+    {
+      if (from in this &&
+          this[from] === elt)
+        return from;
+    }
+    return -1;
+  };
+}
+
+
+
+RooDocsPage = {
+    
+    isIE: function() {
+        var ua = navigator.userAgent.toLowerCase();
+        return ua.indexOf("msie") > -1;
+        
+    },
+    
+    
+    onload : function()
+    {
+        //console.log("loading");
+        
+        this.addEvent(document,'click', function(e) {
+            var ev = e || window.event;
+            var t = ev.target || ev.srcElement;
+            //console.log(t);
+            return RooDocsPage.clicked(t);
+            
+        });
+        
+        
+        
+    },
+    addEvent: function(el, eventName, fn)
+    {
+        
+        if (window.addEventListener) {
+            capture = false;
+            el.addEventListener(eventName, fn, (capture));
+            return;
+        } 
+        if (window.attachEvent) {
+            el.attachEvent("on" + eventName, fn);
+            return;
+         
+        }
+    },
+    clicked : function(t)
+    {
+        
+        
+        var classAr = t.className.split(' ');
+        //console.log(classAr)
+        if ((t.nodeName == 'a') && (classAr.indexOf('exi') < 0) && (classAr.indexOf('micon') < 0)) {
+            // link clicked...
+            return false;
+            /*
+            var cls  = this.getAttributeNS(t,'roo', 'cls');
+            if (cls) {
+                
+                var member = this.getAttributeNS(t,'roo', 'member');
+                //this.loadClass(target.href, cls, member);
+                
+                if (/^src\//.test(cls)) {
+                    cls = cls.replace(/.js$/, ''); // get rid of .js for source links..
+                }
+                
+                
+                document.location = "symbols/"+ cls +".html";
+                return;
+            }
+            */
+        }
+            
+           
+        
+        
+        if (classAr.indexOf('exi') > -1 || classAr.indexOf('micon') > -1) {
+            
+            var tr = t;
+            //console.log(tr.parentNode);
+            while (tr.parentNode) {
+                ///console.log(tr.nodeName);
+                if (tr.nodeName.toUpperCase() =='TR') {
+                    break;
+                }
+                tr = tr.parentNode;
+            }
+            if (tr.nodeName.toUpperCase() != 'TR') { // no tr!
+                return false;
+            }
+            //console.log(tr.className)
+            if (tr.className.match(/expandable/)) {
+                
+                if (!/expanded/.test(tr.className)) {
+                    
+                    tr.className += " expanded";
+                    
+                    this.loadComments(tr);
+                    
+                  //  console.log("ADDED:"+ tr.className);
+                } else {
+                    tr.className = tr.className.replace(/ expanded/,'');
+                    //console.log("REMOVED:"+ tr.className);
+                }
+            }
+            return true;
+            
+            
+            
+        }
+        return false;
+    },
+    
+    getAttributeNS : function(d,ns,name) {
+        if (this.isIE()) {
+            // ie uses attribute stuff...
+            var type = typeof d[ns+":"+name];
+            if(type != 'undefined' && type != 'unknown'){
+                return d[ns+":"+name];
+            }
+            return d[name];
+            
+        } 
+        return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
+    },
+    loadComments: function(tr)
+    {
+        // first look for  'a' tag with id -
+        var a_s = tr.getElementsByTagName('a');
+        
+        if (a_s.length < 2) return; 
+        var id = a_s[1].getAttribute('id');
+        
+        
+        
+        // then see if we have a comment-{id}
+        
+        if (document.getElementById('comments-' + id)) {
+            // we already have it... assume it's loaded and does not need refeshing...
+            return;
+        }
+        
+        // then if not create it....
+        var div_s = tr.getElementsByTagName('div');
+        var pdiv = false;
+        for (var i=0;i<div_s.length;i++) {
+            
+            if (div_s[i].className != "long") {
+                continue
+            }
+            pdiv = div_s[i].parentNode; // parent of the <div class="long"
+            
+        }
+        if (!pdiv) { // we dont have a parent to add it to...
+            return; 
+        }
+        
+        var cdiv = document.createElement("div");
+        cdiv.className = "comments";
+        var cb = document.createElement("b");
+        cb.appendChild(document.createTextNode("Element Comment / Notes"));
+        cdiv.appendChild(cb);
+        cdiv.appendChild(document.createTextNode(" => "));
+        var cu = document.createElement("u");
+        cu.appendChild(document.createTextNode("[Add Your comment/notes about this element]"));
+        
+        cu.setAttribute("onclick", "parent.CommentDialog.showCommentId = '" +   id  + "';");
+        cdiv.appendChild(cu);
+        cdiv.appendChild(document.createElement("br"));
+        var ciframe = document.createElement("iframe");
+        ciframe.setAttribute('height', '50');
+        ciframe.setAttribute('frameborder', '50');
+        ciframe.setAttribute('src', '/blog.php/GtkDjsComments/' + id + '.html');
+        ciframe.setAttribute('style', 'border: medium none ; width: 100%;');
+        ciframe.setAttribute('id', 'comments-' + id);
+        cdiv.appendChild(ciframe);
+        pdiv.appendChild(cdiv);
+        
+    }
+    
+    
+}
+
+
+ /*
+this.preview.getEl().on('click', function(e, target)
+        {
+            //console.log("click pressed?");
+            
+            if(target = e.getTarget('a:not(.exi)', 3)) {
+                var cls = Ext.fly(target).getAttributeNS('roo', 'cls');
+                e.stopEvent();
+                if(cls){
+                    var member = Ext.fly(target).getAttributeNS('roo', 'member');
+                    //this.loadClass(target.href, cls, member);
+                    
+                    if (/^src\//.test(cls)) {
+                        cls = cls.replace(/.js$/, ''); // get rid of .js for source links..
+                    }
+                    
+                    
+                    MainBody.loadPage("symbols/"+ cls +".html");
+                    return;
+                }
+                if(target.className == 'inner-link'){ // go to #
+                    this.getActiveTab().scrollToSection(target.href.split('#')[1]);
+                    return;
+                }
+                window.open(target.href);
+                
+                return; // no more...
+            }
+            if(target = e.getTarget('.micon', 2)){
+                
+                e.stopEvent();
+                var tr = Ext.fly(target.parentNode);
+                if(tr.hasClass('expandable')){
+                    tr.toggleClass('expanded');
+                }
+            }
+          
+        });
+*/
\ No newline at end of file
diff --git a/docs/symbols/src/Array.js.html b/docs/symbols/src/Array.js.html
new file mode 100644 (file)
index 0000000..2986e95
--- /dev/null
@@ -0,0 +1,37 @@
+<html><head><title>/home/alan/gitlive/roojs1/Array.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+ /**
+ * @class Array
+ */
+</span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Array.prototype</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * Checks whether or not the specified object exists in the array.
+     * @param {Object} o The object to check for
+     * @return {Number} The index of o in the array (or -1 if it is not found)
+     */
+    </span><span class="jsdoc-var">indexOf </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+       </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+             </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">i</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
+       }
+          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">-1;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Removes the specified object from the array.  If the object is not found nothing happens.
+     * @param {Object} o The object to remove
+     */
+    </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">!= -1){
+           </span><span class="jsdoc-var">this.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1);
+       }
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Date.js.html b/docs/symbols/src/Date.js.html
new file mode 100644 (file)
index 0000000..8b19328
--- /dev/null
@@ -0,0 +1,778 @@
+<html><head><title>/home/alan/gitlive/roojs1/Date.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Date
+ *
+ * The date parsing and format syntax is a subset of
+ * &lt;a href=&quot;http://www.php.net/date&quot;&gt;PHP's date() function&lt;/a&gt;, and the formats that are
+ * supported will provide results equivalent to their PHP versions.
+ *
+ * Following is the list of all currently supported formats:
+ *&lt;pre&gt;
+Sample date:
+'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
+
+Format  Output      Description
+------  ----------  --------------------------------------------------------------
+  d      10         Day of the month, 2 digits with leading zeros
+  D      Wed        A textual representation of a day, three letters
+  j      10         Day of the month without leading zeros
+  l      Wednesday  A full textual representation of the day of the week
+  S      th         English ordinal day of month suffix, 2 chars (use with j)
+  w      3          Numeric representation of the day of the week
+  z      9          The julian date, or day of the year (0-365)
+  W      01         ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
+  F      January    A full textual representation of the month
+  m      01         Numeric representation of a month, with leading zeros
+  M      Jan        Month name abbreviation, three letters
+  n      1          Numeric representation of a month, without leading zeros
+  t      31         Number of days in the given month
+  L      0          Whether it's a leap year (1 if it is a leap year, else 0)
+  Y      2007       A full numeric representation of a year, 4 digits
+  y      07         A two digit representation of a year
+  a      pm         Lowercase Ante meridiem and Post meridiem
+  A      PM         Uppercase Ante meridiem and Post meridiem
+  g      3          12-hour format of an hour without leading zeros
+  G      15         24-hour format of an hour without leading zeros
+  h      03         12-hour format of an hour with leading zeros
+  H      15         24-hour format of an hour with leading zeros
+  i      05         Minutes with leading zeros
+  s      01         Seconds, with leading zeros
+  O      -0600      Difference to Greenwich time (GMT) in hours
+  T      CST        Timezone setting of the machine running the code
+  Z      -21600     Timezone offset in seconds (negative if west of UTC, positive if east)
+&lt;/pre&gt;
+ *
+ * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
+ * &lt;pre&gt;&lt;code&gt;
+var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
+document.write(dt.format('Y-m-d'));                         //2007-01-10
+document.write(dt.format('F j, Y, g:i a'));                 //January 10, 2007, 3:05 pm
+document.write(dt.format('l, \\t\\he dS of F Y h:i:s A'));  //Wednesday, the 10th of January 2007 03:05:01 PM
+ &lt;/code&gt;&lt;/pre&gt;
+ *
+ * Here are some standard date/time patterns that you might find helpful.  They
+ * are not part of the source of Date.js, but to use them you can simply copy this
+ * block of code into any script that is included after Date.js and they will also become
+ * globally available on the Date object.  Feel free to add or remove patterns as needed in your code.
+ * &lt;pre&gt;&lt;code&gt;
+Date.patterns = {
+    ISO8601Long:&quot;Y-m-d H:i:s&quot;,
+    ISO8601Short:&quot;Y-m-d&quot;,
+    ShortDate: &quot;n/j/Y&quot;,
+    LongDate: &quot;l, F d, Y&quot;,
+    FullDateTime: &quot;l, F d, Y g:i:s A&quot;,
+    MonthDay: &quot;F d&quot;,
+    ShortTime: &quot;g:i A&quot;,
+    LongTime: &quot;g:i:s A&quot;,
+    SortableDateTime: &quot;Y-m-d\\TH:i:s&quot;,
+    UniversalSortableDateTime: &quot;Y-m-d H:i:sO&quot;,
+    YearMonth: &quot;F, Y&quot;
+};
+&lt;/code&gt;&lt;/pre&gt;
+ *
+ * Example usage:
+ * &lt;pre&gt;&lt;code&gt;
+var dt = new Date();
+document.write(dt.format(Date.patterns.ShortDate));
+ &lt;/code&gt;&lt;/pre&gt;
+ */
+
+/*
+ * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
+ * They generate precompiled functions from date formats instead of parsing and
+ * processing the pattern every time you format a date.  These functions are available
+ * on every Date object (any javascript function).
+ *
+ * The original article and download are here:
+ * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
+ *
+ */
+ // was in core
+/**
+ Returns the number of milliseconds between this date and date
+ @param {Date} date (optional) Defaults to now
+ @return {Number} The diff in milliseconds
+ @member Date getElapsed
+ */
+</span><span class="jsdoc-var">Date.prototype.getElapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">date</span><span class="jsdoc-syntax">) {
+       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">date </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">()-</span><span class="jsdoc-var">this.getTime</span><span class="jsdoc-syntax">());
+};
+</span><span class="jsdoc-comment">// was in date file..
+
+
+// private
+</span><span class="jsdoc-var">Date.parseFunctions </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">count</span><span class="jsdoc-syntax">:0};
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.parseRegexes </span><span class="jsdoc-syntax">= [];
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.formatFunctions </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">count</span><span class="jsdoc-syntax">:0};
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.prototype.dateFormat </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Date.formatFunctions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">Date.createNewFormat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">func </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.formatFunctions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">];
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">func</span><span class="jsdoc-syntax">]();
+};
+
+
+</span><span class="jsdoc-comment">/**
+ * Formats a date given the supplied format string
+ * @param {String} format The format string
+ * @return {String} The formatted date
+ * @method
+ */
+</span><span class="jsdoc-var">Date.prototype.format </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.prototype.dateFormat</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.createNewFormat </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">funcName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;format&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">Date.formatFunctions.count</span><span class="jsdoc-syntax">++;
+    </span><span class="jsdoc-var">Date.formatFunctions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">funcName</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">code </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;Date.prototype.&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">funcName </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; = function(){return &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+    </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">format.length</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">format.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;\\&quot;</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">special</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">code </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;'&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">String.escape</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">&quot;' + &quot;</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">code </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">Date.getFormatCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">);
+        }
+    }
+    </span><span class="jsdoc-comment">/** eval:var:zzzzzzzzzzzzz */
+    </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">code.substring</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">code.length </span><span class="jsdoc-syntax">- 3) + </span><span class="jsdoc-string">&quot;;}&quot;</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.getFormatCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">character</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">character</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;String.leftPad(this.getDate(), 2, '0') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;D&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;Date.dayNames[this.getDay()].substring(0, 3) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;j&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getDate() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;Date.dayNames[this.getDay()] + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;S&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getSuffix() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;w&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getDay() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;z&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getDayOfYear() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;W&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getWeekOfYear() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;F&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;Date.monthNames[this.getMonth()] + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;m&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;String.leftPad(this.getMonth() + 1, 2, '0') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;M&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;Date.monthNames[this.getMonth()].substring(0, 3) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;n&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;(this.getMonth() + 1) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getDaysInMonth() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;L&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;(this.isLeapYear() ? 1 : 0) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;Y&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getFullYear() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;y&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;('' + this.getFullYear()).substring(2, 4) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;(this.getHours() &lt; 12 ? 'am' : 'pm') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;A&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;(this.getHours() &lt; 12 ? 'AM' : 'PM') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;g&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;((this.getHours() % 12) ? this.getHours() % 12 : 12) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;G&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getHours() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;h&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;H&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;String.leftPad(this.getHours(), 2, '0') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;i&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;String.leftPad(this.getMinutes(), 2, '0') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;s&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;String.leftPad(this.getSeconds(), 2, '0') + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;O&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getGMTOffset() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;T&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;this.getTimezone() + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;Z&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;(this.getTimezoneOffset() * -60) + &quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;'&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">String.escape</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">character</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">&quot;' + &quot;</span><span class="jsdoc-syntax">;
+    }
+};
+
+</span><span class="jsdoc-comment">/**
+ * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
+ * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates.  Any part of
+ * the date format that is not specified will default to the current date value for that part.  Time parts can also
+ * be specified, but default to 0.  Keep in mind that the input date string must precisely match the specified format
+ * string or the parse operation will fail.
+ * Example Usage:
+&lt;pre&gt;&lt;code&gt;
+//dt = Fri May 25 2007 (current date)
+var dt = new Date();
+
+//dt = Thu May 25 2006 (today's month/day in 2006)
+dt = Date.parseDate(&quot;2006&quot;, &quot;Y&quot;);
+
+//dt = Sun Jan 15 2006 (all date parts specified)
+dt = Date.parseDate(&quot;2006-1-15&quot;, &quot;Y-m-d&quot;);
+
+//dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
+dt = Date.parseDate(&quot;2006-1-15 3:20:01 PM&quot;, &quot;Y-m-d h:i:s A&quot; );
+&lt;/code&gt;&lt;/pre&gt;
+ * @param {String} input The unparsed date as a string
+ * @param {String} format The format the date is in
+ * @return {Date} The parsed date
+ * @static
+ */
+</span><span class="jsdoc-var">Date.parseDate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Date.parseFunctions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">Date.createParser</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">func </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.parseFunctions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">];
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">func</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">);
+};
+</span><span class="jsdoc-comment">/**
+ * @private
+ */
+</span><span class="jsdoc-var">Date.createParser </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">funcName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;parse&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">Date.parseFunctions.count</span><span class="jsdoc-syntax">++;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">regexNum </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.parseRegexes.length</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">= 1;
+    </span><span class="jsdoc-var">Date.parseFunctions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">funcName</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">code </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;Date.&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">funcName </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; = function(input){\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;var d = new Date();\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;y = d.getFullYear();\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;m = d.getMonth();\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;d = d.getDate();\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;var results = input.match(Date.parseRegexes[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">regexNum </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;]);\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;if (results &amp;&amp; results.length &gt; 0) {&quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">regex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+    </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">format.length</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">format.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;\\&quot;</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">special</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">special </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">regex </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">String.escape</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.formatCodeToRegex</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">currentGroup</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">obj.g</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">regex </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">obj.s</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj.g </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">obj.c</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">code </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">obj.c</span><span class="jsdoc-syntax">;
+            }
+        }
+    }
+
+    </span><span class="jsdoc-var">code </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0 &amp;&amp; i &gt;= 0 &amp;&amp; s &gt;= 0)\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;{v = new Date(y, m, d, h, i, s);}\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0 &amp;&amp; i &gt;= 0)\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;{v = new Date(y, m, d, h, i);}\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0)\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;{v = new Date(y, m, d, h);}\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0)\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;{v = new Date(y, m, d);}\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;else if (y &gt;= 0 &amp;&amp; m &gt;= 0)\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;{v = new Date(y, m);}\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;else if (y &gt;= 0)\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;{v = new Date(y);}\n&quot;
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;}return (v &amp;&amp; (z || o))?\n&quot; </span><span class="jsdoc-comment">// favour UTC offset over GMT offset
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;    ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n&quot; </span><span class="jsdoc-comment">// reset to UTC, then add offset
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;        v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n&quot; </span><span class="jsdoc-comment">// reset to GMT, then add offset
+        </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;;}&quot;</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-var">Date.parseRegexes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">regexNum</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">RegExp</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;^&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">regex </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;$&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">/** eval:var:zzzzzzzzzzzzz */
+    </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">code</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.formatCodeToRegex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">character</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">currentGroup</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">character</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;D&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+        </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;j&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;d = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{1,2})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// day of month without leading zeroes
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;d = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{2})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// day of month with leading zeroes
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(?:&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">Date.dayNames.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;|&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">&quot;)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;S&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(?:st|nd|rd|th)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;w&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;\\d&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;z&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(?:\\d{1,3})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;W&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(?:\\d{2})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;F&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;m = parseInt(Date.monthNumbers[results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;].substring(0, 3)], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">Date.monthNames.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;|&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">&quot;)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;M&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;m = parseInt(Date.monthNumbers[results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;]], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;n&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;m = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10) - 1;\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{1,2})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// Numeric representation of a month, without leading zeros
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;m&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;m = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10) - 1;\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{2})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// Numeric representation of a month, with leading zeros
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;\\d{1,2}&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;L&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(?:1|0)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;Y&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;y = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{4})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;y&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;var ty = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;
+                </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;y = ty &gt; Date.y2kYear ? 1900 + ty : 2000 + ty;\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{1,2})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;if (results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;] == 'am') {\n&quot;
+                </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;if (h == 12) { h = 0; }\n&quot;
+                </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;} else { if (h &lt; 12) { h += 12; }}&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(am|pm)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;A&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;if (results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;] == 'AM') {\n&quot;
+                </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;if (h == 12) { h = 0; }\n&quot;
+                </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;} else { if (h &lt; 12) { h += 12; }}&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(AM|PM)&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;g&quot;</span><span class="jsdoc-syntax">:
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;G&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;h = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{1,2})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// 12/24-hr format  format of an hour without leading zeroes
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;h&quot;</span><span class="jsdoc-syntax">:
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;H&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;h = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{2})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">//  12/24-hr format  format of an hour with leading zeroes
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;i&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;i = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{2})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;s&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;s = parseInt(results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;], 10);\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;(\\d{2})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;O&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:[
+                </span><span class="jsdoc-string">&quot;o = results[&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">currentGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;];\n&quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;var sn = o.substring(0,1);\n&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// get + / - sign
+                </span><span class="jsdoc-string">&quot;var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// get hours (performs minutes-to-hour conversion also)
+                </span><span class="jsdoc-string">&quot;var mn = o.substring(3,5) % 60;\n&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// get minutes
+                </span><span class="jsdoc-string">&quot;o = ((-12 &lt;= (hr*60 + mn)/60) &amp;&amp; ((hr*60 + mn)/60 &lt;= 14))?\n&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// -12hrs &lt;= GMT offset &lt;= 14hrs
+                </span><span class="jsdoc-string">&quot;    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n&quot;
+            </span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">),
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;([+\-]\\d{4})&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;T&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;[A-Z]{1,4}&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// timezone abbrev. may be between 1 - 4 chars
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;Z&quot;</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:1,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;z = results[&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">currentGroup </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;];\n&quot; </span><span class="jsdoc-comment">// -43200 &lt;= UTC offset &lt;= 50400
+                  </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;z = (-43200 &lt;= z*1 &amp;&amp; z*1 &lt;= 50400)? z : null;\n&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;([+\-]?\\d{1,5})&quot;</span><span class="jsdoc-syntax">}; </span><span class="jsdoc-comment">// leading '+' sign is optional for UTC offset
+    </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">:0,
+            </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">String.escape</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">character</span><span class="jsdoc-syntax">)};
+    }
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
+ * @return {String} The abbreviated timezone name (e.g. 'CST')
+ */
+</span><span class="jsdoc-var">Date.prototype.getTimezone </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.toString</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, </span><span class="jsdoc-string">&quot;$1&quot;</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
+ * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
+ */
+</span><span class="jsdoc-var">Date.prototype.getGMTOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getTimezoneOffset</span><span class="jsdoc-syntax">() &gt; 0 ? </span><span class="jsdoc-string">&quot;-&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;+&quot;</span><span class="jsdoc-syntax">)
+        + </span><span class="jsdoc-var">String.leftPad</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getTimezoneOffset</span><span class="jsdoc-syntax">() / 60)), 2, </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">)
+        + </span><span class="jsdoc-var">String.leftPad</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getTimezoneOffset</span><span class="jsdoc-syntax">() % 60, 2, </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the numeric day number of the year, adjusted for leap year.
+ * @return {Number} 0 through 364 (365 in leap years)
+ */
+</span><span class="jsdoc-var">Date.prototype.getDayOfYear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">= 0;
+    </span><span class="jsdoc-var">Date.daysInMonth</span><span class="jsdoc-syntax">[1] = </span><span class="jsdoc-var">this.isLeapYear</span><span class="jsdoc-syntax">() ? 29 : 28;
+    </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">this.getMonth</span><span class="jsdoc-syntax">(); ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">Date.daysInMonth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+    }
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.getDate</span><span class="jsdoc-syntax">() - 1;
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the string representation of the numeric week number of the year
+ * (equivalent to the format specifier 'W').
+ * @return {String} '00' through '52'
+ */
+</span><span class="jsdoc-var">Date.prototype.getWeekOfYear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-comment">// Skip to Thursday of this week
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">now </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDayOfYear</span><span class="jsdoc-syntax">() + (4 - </span><span class="jsdoc-var">this.getDay</span><span class="jsdoc-syntax">());
+    </span><span class="jsdoc-comment">// Find the first Thursday of the year
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">jan1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getFullYear</span><span class="jsdoc-syntax">(), 0, 1);
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">then </span><span class="jsdoc-syntax">= (7 - </span><span class="jsdoc-var">jan1.getDay</span><span class="jsdoc-syntax">() + 4);
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String.leftPad</span><span class="jsdoc-syntax">(((</span><span class="jsdoc-var">now </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">then</span><span class="jsdoc-syntax">) / 7) + 1, 2, </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-comment">/**
+ * Whether or not the current date is in a leap year.
+ * @return {Boolean} True if the current date is in a leap year, else false
+ */
+</span><span class="jsdoc-var">Date.prototype.isLeapYear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">year </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFullYear</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">year </span><span class="jsdoc-syntax">&amp; 3) == 0 &amp;&amp; (</span><span class="jsdoc-var">year </span><span class="jsdoc-syntax">% 100 || (</span><span class="jsdoc-var">year </span><span class="jsdoc-syntax">% 400 == 0 &amp;&amp; </span><span class="jsdoc-var">year</span><span class="jsdoc-syntax">)));
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the first day of the current month, adjusted for leap year.  The returned value
+ * is the numeric day index within the week (0-6) which can be used in conjunction with
+ * the {@link #monthNames} array to retrieve the textual day name.
+ * Example:
+ *&lt;pre&gt;&lt;code&gt;
+var dt = new Date('1/10/2007');
+document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
+&lt;/code&gt;&lt;/pre&gt;
+ * @return {Number} The day number (0-6)
+ */
+</span><span class="jsdoc-var">Date.prototype.getFirstDayOfMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.getDay</span><span class="jsdoc-syntax">() - (</span><span class="jsdoc-var">this.getDate</span><span class="jsdoc-syntax">() - 1)) % 7;
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">&lt; 0) ? (</span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">+ 7) : </span><span class="jsdoc-var">day</span><span class="jsdoc-syntax">;
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the last day of the current month, adjusted for leap year.  The returned value
+ * is the numeric day index within the week (0-6) which can be used in conjunction with
+ * the {@link #monthNames} array to retrieve the textual day name.
+ * Example:
+ *&lt;pre&gt;&lt;code&gt;
+var dt = new Date('1/10/2007');
+document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
+&lt;/code&gt;&lt;/pre&gt;
+ * @return {Number} The day number (0-6)
+ */
+</span><span class="jsdoc-var">Date.prototype.getLastDayOfMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.getDay</span><span class="jsdoc-syntax">() + (</span><span class="jsdoc-var">Date.daysInMonth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.getMonth</span><span class="jsdoc-syntax">()] - </span><span class="jsdoc-var">this.getDate</span><span class="jsdoc-syntax">())) % 7;
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">&lt; 0) ? (</span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">+ 7) : </span><span class="jsdoc-var">day</span><span class="jsdoc-syntax">;
+};
+
+
+</span><span class="jsdoc-comment">/**
+ * Get the first date of this date's month
+ * @return {Date}
+ */
+</span><span class="jsdoc-var">Date.prototype.getFirstDateOfMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getFullYear</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.getMonth</span><span class="jsdoc-syntax">(), 1);
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the last date of this date's month
+ * @return {Date}
+ */
+</span><span class="jsdoc-var">Date.prototype.getLastDateOfMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getFullYear</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.getMonth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.getDaysInMonth</span><span class="jsdoc-syntax">());
+};
+</span><span class="jsdoc-comment">/**
+ * Get the number of days in the current month, adjusted for leap year.
+ * @return {Number} The number of days in the month
+ */
+</span><span class="jsdoc-var">Date.prototype.getDaysInMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-var">Date.daysInMonth</span><span class="jsdoc-syntax">[1] = </span><span class="jsdoc-var">this.isLeapYear</span><span class="jsdoc-syntax">() ? 29 : 28;
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Date.daysInMonth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.getMonth</span><span class="jsdoc-syntax">()];
+};
+
+</span><span class="jsdoc-comment">/**
+ * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
+ * @return {String} 'st, 'nd', 'rd' or 'th'
+ */
+</span><span class="jsdoc-var">Date.prototype.getSuffix </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+    </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getDate</span><span class="jsdoc-syntax">()) {
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">1:
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">21:
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">31:
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;st&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">2:
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">22:
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;nd&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">3:
+        </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">23:
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;rd&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;th&quot;</span><span class="jsdoc-syntax">;
+    }
+};
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.daysInMonth </span><span class="jsdoc-syntax">= [31,28,31,30,31,30,31,31,30,31,30,31];
+
+</span><span class="jsdoc-comment">/**
+ * An array of textual month names.
+ * Override these values for international dates, for example...
+ * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
+ * @type Array
+ * @static
+ */
+</span><span class="jsdoc-var">Date.monthNames </span><span class="jsdoc-syntax">=
+   [</span><span class="jsdoc-string">&quot;January&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;February&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;March&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;April&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;May&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;June&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;July&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;August&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;September&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;October&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;November&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;December&quot;</span><span class="jsdoc-syntax">];
+
+</span><span class="jsdoc-comment">/**
+ * An array of textual day names.
+ * Override these values for international dates, for example...
+ * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
+ * @type Array
+ * @static
+ */
+</span><span class="jsdoc-var">Date.dayNames </span><span class="jsdoc-syntax">=
+   [</span><span class="jsdoc-string">&quot;Sunday&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;Monday&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;Tuesday&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;Wednesday&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;Thursday&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;Friday&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-string">&quot;Saturday&quot;</span><span class="jsdoc-syntax">];
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.y2kYear </span><span class="jsdoc-syntax">= 50;
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Date.monthNumbers </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-var">Jan</span><span class="jsdoc-syntax">:0,
+    </span><span class="jsdoc-var">Feb</span><span class="jsdoc-syntax">:1,
+    </span><span class="jsdoc-var">Mar</span><span class="jsdoc-syntax">:2,
+    </span><span class="jsdoc-var">Apr</span><span class="jsdoc-syntax">:3,
+    </span><span class="jsdoc-var">May</span><span class="jsdoc-syntax">:4,
+    </span><span class="jsdoc-var">Jun</span><span class="jsdoc-syntax">:5,
+    </span><span class="jsdoc-var">Jul</span><span class="jsdoc-syntax">:6,
+    </span><span class="jsdoc-var">Aug</span><span class="jsdoc-syntax">:7,
+    </span><span class="jsdoc-var">Sep</span><span class="jsdoc-syntax">:8,
+    </span><span class="jsdoc-var">Oct</span><span class="jsdoc-syntax">:9,
+    </span><span class="jsdoc-var">Nov</span><span class="jsdoc-syntax">:10,
+    </span><span class="jsdoc-var">Dec</span><span class="jsdoc-syntax">:11};
+
+</span><span class="jsdoc-comment">/**
+ * Creates and returns a new Date instance with the exact same date value as the called instance.
+ * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
+ * variable will also be changed.  When the intention is to create a new variable that will not
+ * modify the original instance, you should create a clone.
+ *
+ * Example of correctly cloning a date:
+ * &lt;pre&gt;&lt;code&gt;
+//wrong way:
+var orig = new Date('10/1/2006');
+var copy = orig;
+copy.setDate(5);
+document.write(orig);  //returns 'Thu Oct 05 2006'!
+
+//correct way:
+var orig = new Date('10/1/2006');
+var copy = orig.clone();
+copy.setDate(5);
+document.write(orig);  //returns 'Thu Oct 01 2006'
+&lt;/code&gt;&lt;/pre&gt;
+ * @return {Date} The new Date instance
+ */
+</span><span class="jsdoc-var">Date.prototype.clone </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+       </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getTime</span><span class="jsdoc-syntax">());
+};
+
+</span><span class="jsdoc-comment">/**
+ * Clears any time information from this date
+ @param {Boolean} clone true to create a clone of this date, clear the time and return it
+ @return {Date} this or the clone
+ */
+</span><span class="jsdoc-var">Date.prototype.clearTime </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">clone</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">clone</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.clone</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.clearTime</span><span class="jsdoc-syntax">();
+    }
+    </span><span class="jsdoc-var">this.setHours</span><span class="jsdoc-syntax">(0);
+    </span><span class="jsdoc-var">this.setMinutes</span><span class="jsdoc-syntax">(0);
+    </span><span class="jsdoc-var">this.setSeconds</span><span class="jsdoc-syntax">(0);
+    </span><span class="jsdoc-var">this.setMilliseconds</span><span class="jsdoc-syntax">(0);
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+};
+
+</span><span class="jsdoc-comment">// private
+// safari setMonth is broken
+</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isSafari</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Date.brokenSetMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.prototype.setMonth</span><span class="jsdoc-syntax">;
+       </span><span class="jsdoc-var">Date.prototype.setMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">&lt;= -1){
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(-</span><span class="jsdoc-var">num</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">back_year </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.ceil</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">/12);
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">month </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">% 12) ? 12 - </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">% 12 : 0 ;
+                       </span><span class="jsdoc-var">this.setFullYear</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getFullYear</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">back_year</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Date.brokenSetMonth.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">month</span><span class="jsdoc-syntax">);
+               } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Date.brokenSetMonth.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+               }
+       };
+}
+
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.MILLI </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;ms&quot;</span><span class="jsdoc-syntax">;
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.SECOND </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;s&quot;</span><span class="jsdoc-syntax">;
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.MINUTE </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;mi&quot;</span><span class="jsdoc-syntax">;
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.HOUR </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;h&quot;</span><span class="jsdoc-syntax">;
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.DAY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">;
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.MONTH </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;mo&quot;</span><span class="jsdoc-syntax">;
+</span><span class="jsdoc-comment">/** Date interval constant 
+* @static 
+* @type String */
+</span><span class="jsdoc-var">Date.YEAR </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;y&quot;</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">/**
+ * Provides a convenient method of performing basic date arithmetic.  This method
+ * does not modify the Date instance being called - it creates and returns
+ * a new Date instance containing the resulting date value.
+ *
+ * Examples:
+ * &lt;pre&gt;&lt;code&gt;
+//Basic usage:
+var dt = new Date('10/29/2006').add(Date.DAY, 5);
+document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
+
+//Negative values will subtract correctly:
+var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
+document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
+
+//You can even chain several calls together in one line!
+var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
+document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
+ &lt;/code&gt;&lt;/pre&gt;
+ *
+ * @param {String} interval   A valid date interval enum value
+ * @param {Number} value      The amount to add to the current date
+ * @return {Date} The new Date instance
+ */
+</span><span class="jsdoc-var">Date.prototype.add </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">interval</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+  </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.clone</span><span class="jsdoc-syntax">();
+  </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">interval </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">=== 0) </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
+  </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">interval.toLowerCase</span><span class="jsdoc-syntax">()){
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.MILLI</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-var">d.setMilliseconds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getMilliseconds</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.SECOND</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-var">d.setSeconds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSeconds</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.MINUTE</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-var">d.setMinutes</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getMinutes</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.HOUR</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-var">d.setHours</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getHours</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.DAY</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-var">d.setDate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getDate</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.MONTH</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDate</span><span class="jsdoc-syntax">();
+      </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">&gt; 28){
+          </span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">day</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getFirstDateOfMonth</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mo'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getLastDateOfMonth</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getDate</span><span class="jsdoc-syntax">());
+      }
+      </span><span class="jsdoc-var">d.setDate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">day</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-var">d.setMonth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getMonth</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Date.YEAR</span><span class="jsdoc-syntax">:
+      </span><span class="jsdoc-var">d.setFullYear</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getFullYear</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+      </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+  }
+  </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
+};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Function.js.html b/docs/symbols/src/Function.js.html
new file mode 100644 (file)
index 0000000..b45d520
--- /dev/null
@@ -0,0 +1,137 @@
+<html><head><title>/home/alan/gitlive/roojs1/Function.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {    
+    </span><span class="jsdoc-comment">// wrappedn so fnCleanup is not in global scope...
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">fnCleanUp</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Function.prototype</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">p.createSequence</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">p.defer</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">p.createDelegate</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">p.createCallback</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">p.createInterceptor</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">window.detachEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;onunload&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fnCleanUp</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">window.attachEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;onunload&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fnCleanUp</span><span class="jsdoc-syntax">);
+    }
+})();
+
+
+</span><span class="jsdoc-comment">/**
+ * @class Function
+ * These functions are available on every Function object (any JavaScript function).
+ */
+</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Function.prototype</span><span class="jsdoc-syntax">, {
+     </span><span class="jsdoc-comment">/**
+     * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
+     * Call directly on any function. Example: &lt;code&gt;myFunction.createCallback(myarg, myarg2)&lt;/code&gt;
+     * Will create a function that is bound to those 2 args.
+     * @return {Function} The new function
+    */
+    </span><span class="jsdoc-var">createCallback </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-comment">/*args...*/</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-comment">// make args available, in function below
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">method.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">);
+        };
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates a delegate (callback) that sets the scope to obj.
+     * Call directly on any function. Example: &lt;code&gt;this.myFunction.createDelegate(this)&lt;/code&gt;
+     * Will create a function that is automatically scoped to this.
+     * @param {Object} obj (optional) The object for which the scope is set
+     * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
+     * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
+     *                                             if a number the args are inserted at the specified position
+     * @return {Function} The new function
+     */
+    </span><span class="jsdoc-var">createDelegate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">appendArgs</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">callArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">appendArgs </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">callArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0);
+                </span><span class="jsdoc-var">callArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">callArgs.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">appendArgs </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;number&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">callArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0); </span><span class="jsdoc-comment">// copy arguments first
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">applyArgs </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">appendArgs</span><span class="jsdoc-syntax">, 0]</span><span class="jsdoc-var">.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// create method call params
+                </span><span class="jsdoc-var">Array.prototype.splice.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callArgs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">applyArgs</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// splice them in
+            </span><span class="jsdoc-syntax">}
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">method.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">callArgs</span><span class="jsdoc-syntax">);
+        };
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Calls this function after the number of millseconds specified.
+     * @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
+     * @param {Object} obj (optional) The object for which the scope is set
+     * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
+     * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
+     *                                             if a number the args are inserted at the specified position
+     * @return {Number} The timeout id that can be used with clearTimeout
+     */
+    </span><span class="jsdoc-var">defer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">millis</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">appendArgs</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">appendArgs</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">millis</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">millis</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">0;
+    },
+    </span><span class="jsdoc-comment">/**
+     * Create a combined function call sequence of the original function + the passed function.
+     * The resulting function returns the results of the original function.
+     * The passed fcn is called with the parameters of the original function
+     * @param {Function} fcn The function to sequence
+     * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
+     * @return {Function} The new function
+     */
+    </span><span class="jsdoc-var">createSequence </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fcn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">fcn </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">retval </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">method.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">fcn.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">retval</span><span class="jsdoc-syntax">;
+        };
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates an interceptor function. The passed fcn is called before the original one. If it returns false, the original one is not called.
+     * The resulting function returns the results of the original function.
+     * The passed fcn is called with the parameters of the original function.
+     * @addon
+     * @param {Function} fcn The function to call before the original
+     * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
+     * @return {Function} The new function
+     */
+    </span><span class="jsdoc-var">createInterceptor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fcn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">fcn </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-var">fcn.target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">fcn.method </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">method</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fcn.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">method.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        };
+    }
+});
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Number.js.html b/docs/symbols/src/Number.js.html
new file mode 100644 (file)
index 0000000..398d0d3
--- /dev/null
@@ -0,0 +1,27 @@
+<html><head><title>/home/alan/gitlive/roojs1/Number.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+ /**
+ * @class Number
+ */
+</span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Number.prototype</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * Checks whether or not the current number is within a desired range.  If the number is already within the
+     * range it is returned, otherwise the min or max value is returned depending on which side of the range is
+     * exceeded.  Note that this method returns the constrained value but does not change the current number.
+     * @param {Number} min The minimum number in the range
+     * @param {Number} max The maximum number in the range
+     * @return {Number} The constrained value if outside the range, otherwise the current value
+     */
+    </span><span class="jsdoc-var">constrain </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">min</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">max</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">min</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">max</span><span class="jsdoc-syntax">);
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo.js.html b/docs/symbols/src/Roo.js.html
new file mode 100644 (file)
index 0000000..d4daff3
--- /dev/null
@@ -0,0 +1,559 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+
+
+
+// for old browsers
+</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">];
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo
+ * Roo core utilities and functions.
+ * @singleton
+ */
+</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">Roo </span><span class="jsdoc-syntax">= {}; 
+</span><span class="jsdoc-comment">/**
+ * Copies all the properties of config to obj.
+ * @param {Object} obj The receiver of the properties
+ * @param {Object} config The source of the properties
+ * @param {Object} defaults A different object that will also be applied for default values
+ * @return {Object} returns obj
+ * @member Roo apply
+ */
+
+</span><span class="jsdoc-var">Roo.apply </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaults</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">defaults</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-comment">// no &quot;this&quot; reference for friendly out of scope calls
+        </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaults</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">];
+        }
+    }
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+};
+
+
+(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">idSeed </span><span class="jsdoc-syntax">= 0;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ua </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">navigator.userAgent.toLowerCase</span><span class="jsdoc-syntax">();
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isStrict </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.compatMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;CSS1Compat&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">isOpera </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;opera&quot;</span><span class="jsdoc-syntax">) &gt; -1,
+        </span><span class="jsdoc-var">isSafari </span><span class="jsdoc-syntax">= (/webkit|khtml/)</span><span class="jsdoc-var">.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ua</span><span class="jsdoc-syntax">),
+        </span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;msie&quot;</span><span class="jsdoc-syntax">) &gt; -1,
+        </span><span class="jsdoc-var">isIE7 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;msie 7&quot;</span><span class="jsdoc-syntax">) &gt; -1,
+        </span><span class="jsdoc-var">isGecko </span><span class="jsdoc-syntax">= !</span><span class="jsdoc-var">isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;gecko&quot;</span><span class="jsdoc-syntax">) &gt; -1,
+        </span><span class="jsdoc-var">isBorderBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">isStrict</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">isWindows </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;windows&quot;</span><span class="jsdoc-syntax">) != -1 || </span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;win32&quot;</span><span class="jsdoc-syntax">) != -1),
+        </span><span class="jsdoc-var">isMac </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;macintosh&quot;</span><span class="jsdoc-syntax">) != -1 || </span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mac os x&quot;</span><span class="jsdoc-syntax">) != -1),
+        </span><span class="jsdoc-var">isLinux </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">ua.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;linux&quot;</span><span class="jsdoc-syntax">) != -1),
+        </span><span class="jsdoc-var">isSecure </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.location.href.toLowerCase</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;https&quot;</span><span class="jsdoc-syntax">) === 0;
+
+    </span><span class="jsdoc-comment">// remove css image flicker
+       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">isIE7</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">document.execCommand</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;BackgroundImageCache&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
+    }
+
+    </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">, {
+        </span><span class="jsdoc-comment">/**
+         * True if the browser is in strict mode
+         * @type Boolean
+         */
+        </span><span class="jsdoc-var">isStrict </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isStrict</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * True if the page is running over SSL
+         * @type Boolean
+         */
+        </span><span class="jsdoc-var">isSecure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isSecure</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * True when the document is fully initialized and ready for action
+         * @type Boolean
+         */
+        </span><span class="jsdoc-var">isReady </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/**
+         * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
+         * @type Boolean
+         */
+        </span><span class="jsdoc-var">enableGarbageCollector </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/**
+         * True to automatically purge event listeners after uncaching an element (defaults to false).
+         * Note: this only happens if enableGarbageCollector is true.
+         * @type Boolean
+         */
+        </span><span class="jsdoc-var">enableListenerCollection</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/**
+         * URL to a blank file used by Roo when in secure mode for iframe src and onReady src to prevent
+         * the IE insecure content warning (defaults to javascript:false).
+         * @type String
+         */
+        </span><span class="jsdoc-var">SSL_SECURE_URL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;javascript:false&quot;</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/**
+         * URL to a 1x1 transparent gif image used by Roo to create inline icons with CSS background images. (Defaults to
+         * &quot;http://Roojs.com/s.gif&quot; and you should change this to a URL on your server).
+         * @type String
+         */
+        </span><span class="jsdoc-var">BLANK_IMAGE_URL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;http:/&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;/localhost/s.gif&quot;</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-var">emptyFn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){},
+
+        </span><span class="jsdoc-comment">/**
+         * Copies all the properties of config to obj if they don't already exist.
+         * @param {Object} obj The receiver of the properties
+         * @param {Object} config The source of the properties
+         * @return {Object} returns obj
+         */
+        </span><span class="jsdoc-var">applyIf </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">]; }
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Applies event listeners to elements by selectors when the document is ready.
+         * The event name is specified with an @ suffix.
+&lt;pre&gt;&lt;code&gt;
+Roo.addBehaviors({
+   // add a listener for click on all anchors in element with id foo
+   '#foo a@click' : function(e, t){
+       // do something
+   },
+
+   // add the same listener to multiple selectors (separated by comma BEFORE the @)
+   '#foo a, #bar span.some-class@mouseover' : function(){
+       // do something
+   }
+});
+&lt;/code&gt;&lt;/pre&gt;
+         * @param {Object} obj The list of behaviors to apply
+         */
+        </span><span class="jsdoc-var">addBehaviors </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isReady</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">Roo.onReady</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">Roo.addBehaviors</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                });
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cache </span><span class="jsdoc-syntax">= {}; </span><span class="jsdoc-comment">// simple cache for applying multiple behaviors to same selector does query multiple times
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">parts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'@'</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parts</span><span class="jsdoc-syntax">[1]){ </span><span class="jsdoc-comment">// for Object prototype breakers
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parts</span><span class="jsdoc-syntax">[0];
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">]){
+                        </span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Roo.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
+                    }
+                    </span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parts</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">]);
+                }
+            }
+            </span><span class="jsdoc-var">cache </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Generates unique ids. If the element already has an id, it is unchanged
+         * @param {String/HTMLElement/Element} el (optional) The element to generate an id for
+         * @param {String} prefix (optional) Id prefix (defaults &quot;Roo-gen&quot;)
+         * @return {String} The generated Id.
+         */
+        </span><span class="jsdoc-var">id </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">, </span><span class="jsdoc-var">prefix</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">prefix </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">prefix </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;roo-gen&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">prefix </span><span class="jsdoc-syntax">+ (++</span><span class="jsdoc-var">idSeed</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">el.id </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el.id </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">el.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">)) : </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+        },
+         
+       
+        </span><span class="jsdoc-comment">/**
+         * Extends one class with another class and optionally overrides members with the passed literal. This class
+         * also adds the function &quot;override()&quot; to the class that can be used to override
+         * members on an instance.
+         * @param {Object} subclass The class inheriting the functionality
+         * @param {Object} superclass The class being extended
+         * @param {Object} overrides (optional) A literal with members
+         * @method extend
+         */
+        </span><span class="jsdoc-var">extend </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-comment">// inline overrides
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">io </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">];
+                }
+            };
+            </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">sp </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// eg. prototype, rather than function constructor..
+                    </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sp</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">sp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sb</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">sb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){</span><span class="jsdoc-var">sp.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);};
+                }
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">F </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){}, </span><span class="jsdoc-var">sbp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">spp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sp.prototype</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">F.prototype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">spp</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">sbp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sb.prototype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">F</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">sbp.constructor</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">sb</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">sb.superclass</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">spp</span><span class="jsdoc-syntax">;
+                
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">spp.constructor </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">Object.prototype.constructor</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">spp.constructor</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">sp</span><span class="jsdoc-syntax">;
+                   
+                }
+                
+                </span><span class="jsdoc-var">sb.override </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">Roo.override</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                };
+                </span><span class="jsdoc-var">sbp.override </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">io</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">Roo.override</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">sb</span><span class="jsdoc-syntax">;
+            };
+        }(),
+
+        </span><span class="jsdoc-comment">/**
+         * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
+         * Usage:&lt;pre&gt;&lt;code&gt;
+Roo.override(MyClass, {
+    newMethod1: function(){
+        // etc.
+    },
+    newMethod2: function(foo){
+        // etc.
+    }
+});
+ &lt;/code&gt;&lt;/pre&gt;
+         * @param {Object} origclass The class to override
+         * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
+         * containing one or more methods.
+         * @method override
+         */
+        </span><span class="jsdoc-var">override </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">origclass</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">origclass.prototype</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">method </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">method</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">method</span><span class="jsdoc-syntax">];
+                }
+            }
+        },
+        </span><span class="jsdoc-comment">/**
+         * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
+         * &lt;pre&gt;&lt;code&gt;
+Roo.namespace('Company', 'Company.data');
+Company.Widget = function() { ... }
+Company.data.CustomStore = function(config) { ... }
+&lt;/code&gt;&lt;/pre&gt;
+         * @param {String} namespace1
+         * @param {String} namespace2
+         * @param {String} etc
+         * @method namespace
+         */
+        </span><span class="jsdoc-var">namespace </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">=</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rt</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</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">a.length</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;.&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[0];
+                </span><span class="jsdoc-comment">/** eval:var:o */
+                </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'if (typeof ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' == &quot;undefined&quot;){' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' = {};} o = ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">';'</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">=1; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">&lt;</span><span class="jsdoc-var">d.length</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]]=</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]] || {};
+                    </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]];
+                }
+            }
+        },
+        </span><span class="jsdoc-comment">/**
+         * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
+         * &lt;pre&gt;&lt;code&gt;
+Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
+Roo.factory(conf, Roo.data);
+&lt;/code&gt;&lt;/pre&gt;
+         * @param {String} classname
+         * @param {String} namespace (optional)
+         * @method factory
+         */
+         
+        </span><span class="jsdoc-var">factory </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">)
+        {
+            </span><span class="jsdoc-comment">// no xtype, no ns or c.xns - or forced off by c.xns
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">c.xtype   </span><span class="jsdoc-syntax">|| (!</span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">c.xns</span><span class="jsdoc-syntax">) ||  (</span><span class="jsdoc-var">c.xns </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">)) { </span><span class="jsdoc-comment">// not enough info...
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.xns </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">c.xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// if c.xns is set, then use that..
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.constructor </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.xtype</span><span class="jsdoc-syntax">]) {</span><span class="jsdoc-comment">// already created...
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.xtype</span><span class="jsdoc-syntax">]) {
+                </span><span class="jsdoc-var">console.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Roo.Factory(&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">c.xtype </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;)&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">ret.xns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">c.xns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// prevent recursion..
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+        },
+         
+        </span><span class="jsdoc-comment">/**
+         * Takes an object and converts it to an encoded URL. e.g. Roo.urlEncode({foo: 1, bar: 2}); would return &quot;foo=1&amp;bar=2&quot;.  Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
+         * @param {Object} o
+         * @return {String}
+         */
+        </span><span class="jsdoc-var">urlEncode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">buf </span><span class="jsdoc-syntax">= [];
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ov </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">encodeURIComponent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">buf.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;=&amp;&quot;</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;function&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">buf.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;=&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">encodeURIComponent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">), </span><span class="jsdoc-string">&quot;&amp;&quot;</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ov </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ov.length</span><span class="jsdoc-syntax">) {
+                           </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ov.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                               </span><span class="jsdoc-var">buf.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;=&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">encodeURIComponent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] === </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]), </span><span class="jsdoc-string">&quot;&amp;&quot;</span><span class="jsdoc-syntax">);
+                           }
+                       } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                           </span><span class="jsdoc-var">buf.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;=&amp;&quot;</span><span class="jsdoc-syntax">);
+                       }
+                }
+            }
+            </span><span class="jsdoc-var">buf.pop</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">buf.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Takes an encoded URL and and converts it to an object. e.g. Roo.urlDecode(&quot;foo=1&amp;bar=2&quot;); would return {foo: 1, bar: 2} or Roo.urlDecode(&quot;foo=1&amp;bar=2&amp;bar=3&amp;bar=4&quot;, true); would return {foo: 1, bar: [2, 3, 4]}.
+         * @param {String} string
+         * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
+         * @return {Object} A literal with members
+         */
+        </span><span class="jsdoc-var">urlDecode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">string</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overwrite</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">string </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">string.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{};
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= {};
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pairs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">string.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&amp;'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pair</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pairs.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">pair </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pairs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</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">name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">decodeURIComponent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pair</span><span class="jsdoc-syntax">[0]);
+                </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">decodeURIComponent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pair</span><span class="jsdoc-syntax">[1]);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">overwrite </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
+                    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] = [</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">]];
+                        </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+                    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                        </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
+         * passed array is not really an array, your function is called once with it.
+         * The supplied function is called with (Object item, Number index, Array allItems).
+         * @param {Array/NodeList/Mixed} array
+         * @param {Function} fn
+         * @param {Object} scope
+         */
+        </span><span class="jsdoc-var">each </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">array</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">array.length </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">array </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">array </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">array</span><span class="jsdoc-syntax">];
+            }
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">array.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">array</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">array</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">array</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">; };
+            }
+        },
+
+        </span><span class="jsdoc-comment">// deprecated
+        </span><span class="jsdoc-var">combine </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">as </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">as.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
+            </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">l</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">as</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a.length </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">a.substr</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, 0));
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">r.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Escapes the passed string for use in a regular expression
+         * @param {String} str
+         * @return {String}
+         */
+        </span><span class="jsdoc-var">escapeRe </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s.replace</span><span class="jsdoc-syntax">(/([.*+?^${}()|[\]\/\\])/g, </span><span class="jsdoc-string">&quot;\\$1&quot;</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">// internal
+        </span><span class="jsdoc-var">callback </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">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">delay</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">delay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">cb.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">delay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">|| []);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">cb.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">|| []);
+                }
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Return the dom node for the passed string (id), dom node, or Roo.Element
+         * @param {String/HTMLElement/Roo.Element} el
+         * @return HTMLElement
+         */
+        </span><span class="jsdoc-var">getDom </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">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Shorthand for {@link Roo.ComponentMgr#get}
+        * @param {String} id
+        * @return Roo.Component
+        */
+        </span><span class="jsdoc-var">getCmp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.ComponentMgr.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+        },
+         
+        </span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </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">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">as </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">as</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">as.dom</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">as.removeAllListeners</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">as.remove</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">as.purgeListeners </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">as.purgeListeners</span><span class="jsdoc-syntax">();
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">as.destroy </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">as.destroy</span><span class="jsdoc-syntax">();
+                    }
+                }
+            }
+        },
+
+        </span><span class="jsdoc-comment">// inpired by a similar function in mootools library
+        /**
+         * Returns the type of object that is passed in. If the object passed in is null or undefined it
+         * return false otherwise it returns one of the following values:&lt;ul&gt;
+         * &lt;li&gt;&lt;b&gt;string&lt;/b&gt;: If the object passed is a string&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;number&lt;/b&gt;: If the object passed is a number&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;boolean&lt;/b&gt;: If the object passed is a boolean value&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;function&lt;/b&gt;: If the object passed is a function reference&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;object&lt;/b&gt;: If the object passed is an object&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;array&lt;/b&gt;: If the object passed is an array&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;regexp&lt;/b&gt;: If the object passed is a regular expression&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;element&lt;/b&gt;: If the object passed is a DOM Element&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;nodelist&lt;/b&gt;: If the object passed is a DOM NodeList&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;textnode&lt;/b&gt;: If the object passed is a DOM text node and contains something other than whitespace&lt;/li&gt;
+         * &lt;li&gt;&lt;b&gt;whitespace&lt;/b&gt;: If the object passed is a DOM text node and contains only whitespace&lt;/li&gt;
+         * @param {Mixed} object
+         * @return {String}
+         */
+        </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.htmlElement</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'element'</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">o.nodeName</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.nodeType</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">1: </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'element'</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">3: </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(/\S/)</span><span class="jsdoc-var">.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.nodeValue</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-string">'textnode' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'whitespace'</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.constructor</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'array'</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">RegExp</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'regexp'</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o.length </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o.item </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'nodelist'</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if the passed value is null, undefined or an empty string (optional).
+         * @param {Mixed} value The value to test
+         * @param {Boolean} allowBlank (optional) Pass true if an empty string is not considered empty
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">isEmpty </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">allowBlank</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| (!</span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">v </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">);
+        },
+        
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isOpera </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isOpera</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isSafari </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isSafari</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isIE</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isIE7 </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isIE7</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isGecko </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isGecko</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isBorderBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isBorderBox</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isWindows </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isWindows</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isLinux </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isLinux</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** @type Boolean */
+        </span><span class="jsdoc-var">isMac </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">isMac</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/**
+         * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
+         * you may want to set this to true.
+         * @type Boolean
+         */
+        </span><span class="jsdoc-var">useShims </span><span class="jsdoc-syntax">: ((</span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">isIE7</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">isGecko </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">isMac</span><span class="jsdoc-syntax">))
+    });
+
+
+})();
+
+</span><span class="jsdoc-var">Roo.namespace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Roo&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.util&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.grid&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.dd&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.tree&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.data&quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;Roo.form&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.menu&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.state&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.lib&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.layout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.app&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;Roo.ux&quot;</span><span class="jsdoc-syntax">);
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Ajax.js.html b/docs/symbols/src/Roo_Ajax.js.html
new file mode 100644 (file)
index 0000000..1b8a894
--- /dev/null
@@ -0,0 +1,97 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Ajax.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.Ajax
+ * @extends Roo.data.Connection
+ * Global Ajax request class.
+ *
+ * @instanceOf  Roo.data.Connection
+ */
+</span><span class="jsdoc-var">Roo.Ajax </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.Connection</span><span class="jsdoc-syntax">({
+    </span><span class="jsdoc-comment">// fix up the docs
+    
+    /**
+     * fix up scoping
+     * @scope Roo.Ajax
+     */
+    
+   /**
+     * @cfg {String} url @hide
+     */
+    /**
+     * @cfg {Object} extraParams @hide
+     */
+    /**
+     * @cfg {Object} defaultHeaders @hide
+     */
+    /**
+     * @cfg {String} method (Optional) @hide
+     */
+    /**
+     * @cfg {Number} timeout (Optional) @hide
+     */
+    /**
+     * @cfg {Boolean} autoAbort (Optional) @hide
+     */
+
+    /**
+     * @cfg {Boolean} disableCaching (Optional) @hide
+     */
+
+    /**
+     * @property  disableCaching
+     * True to add a unique cache-buster param to GET requests. (defaults to true)
+     * @type Boolean
+     */
+    /**
+     * @property  url
+     * The default URL to be used for requests to the server. (defaults to undefined)
+     * @type String
+     */
+    /**
+     * @property  extraParams
+     * An object containing properties which are used as
+     * extra parameters to each request made by this object. (defaults to undefined)
+     * @type Object
+     */
+    /**
+     * @property  defaultHeaders
+     * An object containing request headers which are added to each request made by this object. (defaults to undefined)
+     * @type Object
+     */
+    /**
+     * @property  method
+     * The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
+     * @type String
+     */
+    /**
+     * @property  timeout
+     * The timeout in milliseconds to be used for requests. (defaults to 30000)
+     * @type Number
+     */
+
+    /**
+     * @property  autoAbort
+     * Whether a new request should abort any pending requests. (defaults to false)
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">autoAbort </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Serialize the passed form into a url encoded string
+     * @param {String/HTMLElement} form
+     * @return {String}
+     */
+    </span><span class="jsdoc-var">serializeForm </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">form</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.lib.Ajax.serializeForm</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">form</span><span class="jsdoc-syntax">);
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_BasicDialog.js.html b/docs/symbols/src/Roo_BasicDialog.js.html
new file mode 100644 (file)
index 0000000..fc365a0
--- /dev/null
@@ -0,0 +1,1245 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/BasicDialog.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.BasicDialog
+ * @extends Roo.util.Observable
+ * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
+ * &lt;pre&gt;&lt;code&gt;
+var dlg = new Roo.BasicDialog(&quot;my-dlg&quot;, {
+    height: 200,
+    width: 300,
+    minHeight: 100,
+    minWidth: 150,
+    modal: true,
+    proxyDrag: true,
+    shadow: true
+});
+dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
+dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
+dlg.addButton('Cancel', dlg.hide, dlg);
+dlg.show();
+&lt;/code&gt;&lt;/pre&gt;
+  &lt;b&gt;A Dialog should always be a direct child of the body element.&lt;/b&gt;
+ * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
+ * @cfg {String} title Default text to display in the title bar (defaults to null)
+ * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
+ * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
+ * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
+ * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
+ * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
+ * (defaults to null with no animation)
+ * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
+ * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
+ * property for valid values (defaults to 'all')
+ * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
+ * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
+ * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
+ * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
+ * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
+ * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
+ * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
+ * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
+ * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
+ * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
+ * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
+ * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
+ * draggable = true (defaults to false)
+ * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
+ * @cfg {Boolean/String} shadow True or &quot;sides&quot; for the default effect, &quot;frame&quot; for 4-way shadow, and &quot;drop&quot; for bottom-right
+ * shadow (defaults to false)
+ * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
+ * @cfg {String} buttonAlign Valid values are &quot;left,&quot; &quot;center&quot; and &quot;right&quot; (defaults to &quot;right&quot;)
+ * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
+ * @cfg {Array} buttons Array of buttons
+ * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
+ * @constructor
+ * Create a new BasicDialog.
+ * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
+ * @param {Object} config Configuration options
+ */
+</span><span class="jsdoc-var">Roo.BasicDialog </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config.autoCreate</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.autoCreate </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">config.autoCreate.id</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">config.autoCreate.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">config.autoCreate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">,
+                        {</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">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'visibility:hidden;'</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+    }
+    </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">el.hide </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.id</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg&quot;</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-var">Roo.apply</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">);
+
+    </span><span class="jsdoc-var">this.proxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createProxy</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-proxy&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.proxy.hide </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.proxy.setOpacity</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+    </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.width</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.width</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.height</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.height</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">this.size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getSize</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.x </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.y </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">config.x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">config.y</span><span class="jsdoc-syntax">];
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getCenterXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-comment">/** The header element @type Roo.Element */
+    </span><span class="jsdoc-var">this.header </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&gt; .x-dlg-hd&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">/** The body element @type Roo.Element */
+    </span><span class="jsdoc-var">this.body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&gt; .x-dlg-bd&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">/** The footer element @type Roo.Element */
+    </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&gt; .x-dlg-ft&quot;</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.header</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.header </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createChild</span><span class="jsdoc-syntax">({</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">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-hd&quot;</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">}, </span><span class="jsdoc-var">this.body </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.body.dom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.body</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createChild</span><span class="jsdoc-syntax">({</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">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-bd&quot;</span><span class="jsdoc-syntax">});
+    }
+
+    </span><span class="jsdoc-var">this.header.unselectable</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.header.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-comment">// this element allows the dialog to be focused for keyboard event
+    </span><span class="jsdoc-var">this.focusEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-focus&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tabIndex</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;-1&quot;</span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">this.focusEl.swallowEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-var">this.header.wrap</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-hd-right&quot;</span><span class="jsdoc-syntax">})</span><span class="jsdoc-var">.wrap</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-hd-left&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-comment">// wrap the body and footer for special rendering
+    </span><span class="jsdoc-var">this.bwrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.body.wrap</span><span class="jsdoc-syntax">({</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">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-dlg-body&quot;</span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.bwrap.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer.dom</span><span class="jsdoc-syntax">);
+    }
+
+    </span><span class="jsdoc-var">this.bg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">({
+        </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">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-bg&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;div class=&quot;x-dlg-bg-left&quot;&gt;&lt;div class=&quot;x-dlg-bg-right&quot;&gt;&lt;div class=&quot;x-dlg-bg-center&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">this.centerBg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bg.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div.x-dlg-bg-center&quot;</span><span class="jsdoc-syntax">);
+
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoScroll </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.autoTabs</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.body.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">);
+    }
+
+    </span><span class="jsdoc-var">this.toolbox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-dlg-toolbox&quot;</span><span class="jsdoc-syntax">});
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.closable </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-closable&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.close </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toolbox.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-close&quot;</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">this.close.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.closeClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.close.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-close-over&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsible </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.collapseBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toolbox.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-collapse&quot;</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">this.collapseBtn.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.collapseClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.collapseBtn.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-collapse-over&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.header.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.collapseClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizable </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-resizable&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.resizer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Resizable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, {
+            </span><span class="jsdoc-var">minWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">|| 80,
+            </span><span class="jsdoc-var">minHeight</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">|| 80,
+            </span><span class="jsdoc-var">handles</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.resizeHandles </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;all&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">pinned</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">this.resizer.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeresize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.resizer.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.draggable </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-draggable&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.proxyDrag</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DD</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;WindowDrag&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DDProxy</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;WindowDrag&quot;</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">dragElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.proxy.id</span><span class="jsdoc-syntax">});
+        }
+        </span><span class="jsdoc-var">dd.setHandleElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.header.id</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">dd.endDrag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.endMove.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">dd.startDrag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startMove.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">dd.onDrag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.onDrag.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">dd.scroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">;
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.modal</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.mask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, {</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">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-mask&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.mask.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;block&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.mask.hide</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-modal&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.shadow </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Shadow</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">mode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.shadow </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.shadow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;sides&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shadowOffset
+        </span><span class="jsdoc-syntax">});
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">this.shadowOffset </span><span class="jsdoc-syntax">= 0;
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.useShims </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.shim </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.shim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createShim</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.shim.hide </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.shim.hide</span><span class="jsdoc-syntax">();
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">this.shim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoTabs</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.initTabs</span><span class="jsdoc-syntax">();
+    }
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">) { 
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bts</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.addButton</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    
+    
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+         * @event keydown
+         * Fires when a key is pressed
+         * @param {Roo.BasicDialog} this
+         * @param {Roo.EventObject} e
+         */
+        </span><span class="jsdoc-string">&quot;keydown&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event move
+         * Fires when this dialog is moved by the user.
+         * @param {Roo.BasicDialog} this
+         * @param {Number} x The new page X
+         * @param {Number} y The new page Y
+         */
+        </span><span class="jsdoc-string">&quot;move&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event resize
+         * Fires when this dialog is resized by the user.
+         * @param {Roo.BasicDialog} this
+         * @param {Number} width The new width
+         * @param {Number} height The new height
+         */
+        </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforehide
+         * Fires before this dialog is hidden.
+         * @param {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-string">&quot;beforehide&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event hide
+         * Fires when this dialog is hidden.
+         * @param {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-string">&quot;hide&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforeshow
+         * Fires before this dialog is shown.
+         * @param {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-string">&quot;beforeshow&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event show
+         * Fires when this dialog is shown.
+         * @param {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-string">&quot;show&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onKeyDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.toFront</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.adjustViewport</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">Roo.DialogManager.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">Roo.BasicDialog.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.BasicDialog</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">shadowOffset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? 6 : 5,
+    </span><span class="jsdoc-var">minHeight</span><span class="jsdoc-syntax">: 80,
+    </span><span class="jsdoc-var">minWidth</span><span class="jsdoc-syntax">: 200,
+    </span><span class="jsdoc-var">minButtonWidth</span><span class="jsdoc-syntax">: 75,
+    </span><span class="jsdoc-var">defaultButton</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">buttonAlign</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">tabTag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">firstShow</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the dialog title text
+     * @param {String} text The title text to display
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">setTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.header.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">closeClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">collapseClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;expand&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;collapse&quot;</span><span class="jsdoc-syntax">]();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Collapses the dialog to its minimized state (only the title bar is visible).
+     * Equivalent to the user clicking the collapse dialog button.
+     */
+    </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-collapsed&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.restoreHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.header.getHeight</span><span class="jsdoc-syntax">());
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Expands a collapsed dialog back to its normal state.  Equivalent to the user
+     * clicking the expand dialog button.
+     */
+    </span><span class="jsdoc-var">expand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-collapsed&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.restoreHeight</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Reinitializes the tabs component, clearing out old tabs and finding new ones.
+     * @return {Roo.TabPanel} The tabs component
+     */
+    </span><span class="jsdoc-var">initTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getTabs</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tabs.getTab</span><span class="jsdoc-syntax">(0)){
+            </span><span class="jsdoc-var">tabs.removeTab</span><span class="jsdoc-syntax">(0);
+        }
+        </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabTag</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'.x-dlg-tab'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.each</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">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">tabs.addTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">dom.title</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">dom.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+        });
+        </span><span class="jsdoc-var">tabs.activate</span><span class="jsdoc-syntax">(0);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tabs</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">beforeResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.resizer.minHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getHeaderFooterHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)+40);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.refreshSize</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.syncBodyHeight</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.size.height</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onKeyDown </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Resizes the dialog.
+     * @param {Number} width
+     * @param {Number} height
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">resizeTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.size </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">};
+        </span><span class="jsdoc-var">this.syncBodyHeight</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fixedcenter</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.center</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.constrainXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+
+    </span><span class="jsdoc-comment">/**
+     * Resizes the dialog to fit the specified content size.
+     * @param {Number} width
+     * @param {Number} height
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">setContentSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.getHeaderFooterHeight</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.body.getMargins</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.body.getMargins</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.bwrap.getMargins</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.centerBg.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//if(!this.el.isBorderBox()){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+=  </span><span class="jsdoc-var">this.body.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.bwrap.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.body.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.body.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.bwrap.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.body.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.bwrap.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//}
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.tabs.stripWrap.getHeight</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.tabs.bodyEl.getMargins</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.tabs.bodyEl.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.tabs.bodyEl.getMargins</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.tabs.bodyEl.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
+     * executed in response to a particular key being pressed while the dialog is active.
+     * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
+     *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">addKeyListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">shift</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ctrl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">alt</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">&amp;&amp; !(</span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;key&quot;</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;shift&quot;</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-var">ctrl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;ctrl&quot;</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;alt&quot;</span><span class="jsdoc-syntax">];
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">handler </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((!</span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.shiftKey</span><span class="jsdoc-syntax">) &amp;&amp; (!</span><span class="jsdoc-var">ctrl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">) &amp;&amp;  (!</span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.altKey</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">keyCode </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                    </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">keyCode.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+                          </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                          </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                        }
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                    }
+                }
+            }
+        };
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the TabPanel component (creates it if it doesn't exist).
+     * Note: If you wish to simply check for the existence of tabs without creating them,
+     * check for a null 'tabs' property.
+     * @return {Roo.TabPanel} The tabs component
+     */
+    </span><span class="jsdoc-var">getTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-auto-tabs&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.body.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabPosition </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;bottom&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;x-tabs-bottom&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-tabs-top&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.TabPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.body.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tabPosition </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Adds a button to the footer section of the dialog.
+     * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+     * object or a valid Roo.DomHelper element config
+     * @param {Function} handler The function called when the button is clicked
+     * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
+     * @return {Roo.Button} The new button
+     */
+    </span><span class="jsdoc-var">addButton </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">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bwrap</span><span class="jsdoc-syntax">, {</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">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-ft&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.btnContainer</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.footer.createChild</span><span class="jsdoc-syntax">({
+
+                </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-btns x-dlg-btns-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.buttonAlign</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'&lt;table cellspacing=&quot;0&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div class=&quot;x-clear&quot;&gt;&lt;/div&gt;'
+            </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.btnContainer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb.firstChild.firstChild.firstChild</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bconfig </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">minWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.minButtonWidth</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">hideParent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true
+        </span><span class="jsdoc-syntax">};
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">bconfig.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.tag</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">bconfig.dhconfig </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bconfig</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </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">bconfig.position</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">bconfig.position </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.btnContainer.childNodes.length</span><span class="jsdoc-syntax">-1) {
+            </span><span class="jsdoc-var">bconfig.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">bconfig.position</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">fc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.btnContainer.childNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">bconfig.position</span><span class="jsdoc-syntax">];
+        }
+         
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Button</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-var">fc </span><span class="jsdoc-syntax">? 
+                </span><span class="jsdoc-var">this.btnContainer.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td&quot;</span><span class="jsdoc-syntax">),</span><span class="jsdoc-var">fc</span><span class="jsdoc-syntax">)
+                : </span><span class="jsdoc-var">this.btnContainer.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td&quot;</span><span class="jsdoc-syntax">)),
+            </span><span class="jsdoc-comment">//Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
+            </span><span class="jsdoc-var">bconfig
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.syncBodyHeight</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">/**
+             * Array of all the buttons that have been added to this dialog via addButton
+             * @type Array
+             */
+            </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= [];
+        }
+        </span><span class="jsdoc-var">this.buttons.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the default button to be focused when the dialog is displayed.
+     * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">setDefaultButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.defaultButton </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">getHeaderFooterHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">safe</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.header</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.header.getHeight</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.footer.getMargins</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">this.footer.getHeight</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">fm.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">fm.bottom</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.bwrap.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.bwrap.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.centerBg.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">syncBodyHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.centerBg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bwrap</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.size.height </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.getHeaderFooterHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">bd.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">bd.getMargins</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.header.getHeight</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.size.height</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">hh</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">cb.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">bw.setLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">hh</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cb.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">bw.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">cb.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">bw.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">cb.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">bd.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bw.getWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tabs.syncHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.tabs.el.repaint</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Restores the previous state of the dialog if Roo.state is configured.
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">restoreState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.state.Manager.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stateId </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;-state&quot;</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">beforeShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fixedcenter</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getCenterXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.modal</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">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-body-masked&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.mask.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">this.mask.show</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.constrainXY</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">animShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animateTarget</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getBox</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.proxy.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.proxy.setLocation</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.proxy.show</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.proxy.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">this.size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.size.height</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35, </span><span class="jsdoc-var">this.showEl.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Shows the dialog.
+     * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">animateTarget</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeshow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.syncHeightBeforeShow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.syncBodyHeight</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.firstShow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.firstShow </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.syncBodyHeight</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">// sync the height on the first show instead of in the constructor
+        </span><span class="jsdoc-syntax">}
+        </span><span class="jsdoc-var">this.animateTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">animateTarget </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.animateTarget</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.beforeShow</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animateTarget</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.animShow</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.showEl</span><span class="jsdoc-syntax">();
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">showEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.toFront</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-comment">// IE peekaboo bug - fix found by Dave Fenwick
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.repaint</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;show&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
+     * dialog itself will receive focus.
+     */
+    </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultButton</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.defaultButton.focus</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.focusEl.focus</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">constrainXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constraintoviewport </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.viewSize</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container.getSize</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">this.viewSize </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">s.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s.height</span><span class="jsdoc-syntax">];
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">this.viewSize </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(),</span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()];
+                }
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getScroll</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.size.height</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.viewSize</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.viewSize</span><span class="jsdoc-syntax">[1];
+            </span><span class="jsdoc-comment">// only move it if it needs it
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// first validate right/bottom
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">vw</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">vh</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-comment">// then make sure top/left isn't negative
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">moved</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-comment">// cache xy
+                </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">this.el.setLocation</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+                }
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onDrag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.proxyDrag</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">adjustAssets </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doShow</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.size.height</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doShow </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.shadow.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.shim.show</span><span class="jsdoc-syntax">();
+            }
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.shadow.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.shadow.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.shim.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.shim.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">adjustViewport </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-comment">// cache the size
+        </span><span class="jsdoc-var">this.viewSize </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.modal </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.mask.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.mask.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// first make sure the mask isn't causing overflow
+            </span><span class="jsdoc-var">this.mask.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.constrainXY</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Destroys this dialog and all its supporting elements (including any tabs, shim,
+     * shadow, proxy, mask, etc.)  Also removes all event listeners.
+     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+     */
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.animateTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">Roo.EventManager.removeResizeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.adjustViewport</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tabs.destroy</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">Roo.destroy</span><span class="jsdoc-syntax">(
+             </span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">,
+             </span><span class="jsdoc-var">this.proxy</span><span class="jsdoc-syntax">,
+             </span><span class="jsdoc-var">this.resizer</span><span class="jsdoc-syntax">,
+             </span><span class="jsdoc-var">this.close</span><span class="jsdoc-syntax">,
+             </span><span class="jsdoc-var">this.mask
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dd</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.dd.unreg</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">){
+           </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+               </span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.destroy</span><span class="jsdoc-syntax">();
+           }
+        }
+        </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">Roo.DialogManager.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">startMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.proxyDrag</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.proxy.show</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constraintoviewport </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.dd.constrainTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">});
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">endMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.proxyDrag</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.dd.DD.prototype.endDrag.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">Roo.dd.DDProxy.prototype.endDrag.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.refreshSize</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;move&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1]);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Brings this dialog to the front of any other visible dialogs
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">toFront </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.DialogManager.bringToFront</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sends this dialog to the back (under) of any other visible dialogs
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">toBack </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.DialogManager.sendToBack</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Centers this dialog in the viewport
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getCenterXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Moves the dialog's top-left corner to the specified point
+     * @param {Number} x
+     * @param {Number} y
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">moveTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Aligns the dialog to the specified element
+     * @param {String/HTMLElement/Roo.Element} element The element to align to.
+     * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
+     * @param {Array} offsets (optional) Offset the positioning by [x, y]
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">alignTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.adjustAssets</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Anchors an element to another element and realigns it when the window is resized.
+     * @param {String/HTMLElement/Roo.Element} element The element to align to.
+     * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
+     * @param {Array} offsets (optional) Offset the positioning by [x, y]
+     * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
+     * is a number, it is used as the buffer delay (defaults to 50ms).
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">anchorTo </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">, </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">monitorScroll</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">this.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">);
+        };
+        </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">action</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">monitorScroll</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'scroll'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">action</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
+                {</span><span class="jsdoc-var">buffer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">monitorScroll </span><span class="jsdoc-syntax">: 50});
+        }
+        </span><span class="jsdoc-var">action.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns true if the dialog is visible
+     * @return {Boolean}
+     */
+    </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.isVisible</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">animHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animateTarget</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getBox</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.proxy.show</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.proxy.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">this.size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.size.height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.proxy.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35,
+                    </span><span class="jsdoc-var">this.hideEl.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">]));
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Hides the dialog.
+     * @param {Function} callback (optional) Function to call when the dialog is hidden
+     * @return {Roo.BasicDialog} this
+     */
+    </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforehide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadow.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">) {
+          </span><span class="jsdoc-var">this.shim.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animateTarget</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-var">this.animHide</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.hideEl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">hideEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.modal</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.mask.hide</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">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-body-masked&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">hideAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;-10000px&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;-10000px&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibility&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">refreshSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getXY</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">Roo.state.Manager.set</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stateId </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;-state&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">());
+    },
+
+    </span><span class="jsdoc-comment">// private
+    // z-index is managed by the DialogManager and may be overwritten at any time
+    </span><span class="jsdoc-var">setZIndex </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.modal</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.mask.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shim.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, ++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadow.setZIndex</span><span class="jsdoc-syntax">(++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
+        }
+        </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-var">index</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.proxy</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.proxy.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, ++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizer</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.resizer.proxy.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, ++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.lastZIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the element for this dialog
+     * @return {Roo.Element} The underlying dialog Element
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    }
+});
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.DialogManager
+ * Provides global access to BasicDialogs that have been created and
+ * support for z-indexing (layering) multiple open dialogs.
+ */
+</span><span class="jsdoc-var">Roo.DialogManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">list </span><span class="jsdoc-syntax">= {};
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">accessList </span><span class="jsdoc-syntax">= [];
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">front </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sortDialogs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d2</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">d1._lastAccess </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">d1._lastAccess </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">d2._lastAccess</span><span class="jsdoc-syntax">) ? -1 : 1;
+    };
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">orderDialogs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">accessList.sort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sortDialogs</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">seed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DialogManager.zseed</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">accessList.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dlg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">accessList</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">dlg.setZIndex</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">seed </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">*10));
+            }
+        }
+    };
+
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-comment">/**
+         * The starting z-index for BasicDialogs (defaults to 9000)
+         * @type Number The z-index value
+         */
+        </span><span class="jsdoc-var">zseed </span><span class="jsdoc-syntax">: 9000,
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">dlg.id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">accessList.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">unregister </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">dlg.id</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-keyword">var </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">=0;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">accessList.indexOf</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(  </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">accessList.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">accessList</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">accessList.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, 1);
+                        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                    }
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                 </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">accessList.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">!= -1){
+                    </span><span class="jsdoc-var">accessList.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, 1);
+                }
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets a registered dialog by id
+         * @param {String/Object} id The id of the dialog or a dialog
+         * @return {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-var">get </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Brings the specified dialog to the front
+         * @param {String/Object} dlg The id of the dialog or a dialog
+         * @return {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-var">bringToFront </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">dlg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">front</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">front </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">dlg._lastAccess </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">orderDialogs</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sends the specified dialog to the back
+         * @param {String/Object} dlg The id of the dialog or a dialog
+         * @return {Roo.BasicDialog} this
+         */
+        </span><span class="jsdoc-var">sendToBack </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">dlg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">dlg._lastAccess </span><span class="jsdoc-syntax">= -(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">());
+            </span><span class="jsdoc-var">orderDialogs</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dlg</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Hides all dialogs
+         */
+        </span><span class="jsdoc-var">hideAll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] &amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.isVisible</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">list</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.hide</span><span class="jsdoc-syntax">();
+                }
+            }
+        }
+    };
+}();
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.LayoutDialog
+ * @extends Roo.BasicDialog
+ * Dialog which provides adjustments for working with a layout in a Dialog.
+ * Add your necessary layout config options to the dialog's config.&lt;br&gt;
+ * Example usage (including a nested layout):
+ * &lt;pre&gt;&lt;code&gt;
+if(!dialog){
+    dialog = new Roo.LayoutDialog(&quot;download-dlg&quot;, {
+        modal: true,
+        width:600,
+        height:450,
+        shadow:true,
+        minWidth:500,
+        minHeight:350,
+        autoTabs:true,
+        proxyDrag:true,
+        // layout config merges with the dialog config
+        center:{
+            tabPosition: &quot;top&quot;,
+            alwaysShowTabs: true
+        }
+    });
+    dialog.addKeyListener(27, dialog.hide, dialog);
+    dialog.setDefaultButton(dialog.addButton(&quot;Close&quot;, dialog.hide, dialog));
+    dialog.addButton(&quot;Build It!&quot;, this.getDownload, this);
+
+    // we can even add nested layouts
+    var innerLayout = new Roo.BorderLayout(&quot;dl-inner&quot;, {
+        east: {
+            initialSize: 200,
+            autoScroll:true,
+            split:true
+        },
+        center: {
+            autoScroll:true
+        }
+    });
+    innerLayout.beginUpdate();
+    innerLayout.add(&quot;east&quot;, new Roo.ContentPanel(&quot;dl-details&quot;));
+    innerLayout.add(&quot;center&quot;, new Roo.ContentPanel(&quot;selection-panel&quot;));
+    innerLayout.endUpdate(true);
+
+    var layout = dialog.getLayout();
+    layout.beginUpdate();
+    layout.add(&quot;center&quot;, new Roo.ContentPanel(&quot;standard-panel&quot;,
+                        {title: &quot;Download the Source&quot;, fitToFrame:true}));
+    layout.add(&quot;center&quot;, new Roo.NestedLayoutPanel(innerLayout,
+               {title: &quot;Build your own roo.js&quot;}));
+    layout.getRegion(&quot;center&quot;).showPanel(sp);
+    layout.endUpdate();
+}
+&lt;/code&gt;&lt;/pre&gt;
+    * @constructor
+    * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
+    * @param {Object} config configuration options
+  */
+</span><span class="jsdoc-var">Roo.LayoutDialog </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">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">){
+    
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
+    </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">cfg</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">document.documentElement </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-comment">//config.autoCreate = true;
+    </span><span class="jsdoc-syntax">}
+    
+    
+    </span><span class="jsdoc-var">config.autoTabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">Roo.LayoutDialog.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.body.setStyle</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">overflow</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">this.layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.body.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.layout.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dlg-auto-layout&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">// fix case when center region overwrites center function
+    </span><span class="jsdoc-var">this.center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.BasicDialog.prototype.center</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;show&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    
+    
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.LayoutDialog</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BasicDialog</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * Ends update of the layout &lt;strike&gt;and resets display to none&lt;/strike&gt;. Use standard beginUpdate/endUpdate on the layout.
+     * @deprecated
+     */
+    </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.layout.endUpdate</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Begins an update of the layout &lt;strike&gt;and sets display to block and visibility to hidden&lt;/strike&gt;. Use standard beginUpdate/endUpdate on the layout.
+     *  @deprecated
+     */
+    </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.layout.beginUpdate</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Get the BorderLayout for this dialog
+     * @return {Roo.BorderLayout}
+     */
+    </span><span class="jsdoc-var">getLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">showEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.LayoutDialog.superclass.showEl.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE7</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    // Use the syncHeightBeforeShow config option to control this automatically
+    </span><span class="jsdoc-var">syncBodyHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.LayoutDialog.superclass.syncBodyHeight.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">){</span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">();}
+    },
+    
+      </span><span class="jsdoc-comment">/**
+     * Add an xtype element (actually adds to the layout.)
+     * @return {Object} xdata xtype object data.
+     */
+    
+    </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">c</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.layout.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_BasicLayoutRegion.js.html b/docs/symbols/src/Roo_BasicLayoutRegion.js.html
new file mode 100644 (file)
index 0000000..63332ff
--- /dev/null
@@ -0,0 +1,309 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/BasicLayoutRegion.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.BasicLayoutRegion
+ * @extends Roo.util.Observable
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position 
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
+ */
+</span><span class="jsdoc-var">Roo.BasicLayoutRegion </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">skipConfig</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">this.mgr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.position  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.events </span><span class="jsdoc-syntax">= {
+        </span><span class="jsdoc-comment">/**
+         * @scope Roo.BasicLayoutRegion
+         */
+        
+        /**
+         * @event beforeremove
+         * Fires before a panel is removed (or closed). To cancel the removal set &quot;e.cancel = true&quot; on the event argument.
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         * @param {Object} e The cancel event object
+         */
+        </span><span class="jsdoc-string">&quot;beforeremove&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event invalidated
+         * Fires when the layout for this region is changed.
+         * @param {Roo.LayoutRegion} this
+         */
+        </span><span class="jsdoc-string">&quot;invalidated&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event visibilitychange
+         * Fires when this region is shown or hidden 
+         * @param {Roo.LayoutRegion} this
+         * @param {Boolean} visibility true or false
+         */
+        </span><span class="jsdoc-string">&quot;visibilitychange&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event paneladded
+         * Fires when a panel is added. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        </span><span class="jsdoc-string">&quot;paneladded&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event panelremoved
+         * Fires when a panel is removed. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        </span><span class="jsdoc-string">&quot;panelremoved&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event collapsed
+         * Fires when this region is collapsed.
+         * @param {Roo.LayoutRegion} this
+         */
+        </span><span class="jsdoc-string">&quot;collapsed&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event expanded
+         * Fires when this region is expanded.
+         * @param {Roo.LayoutRegion} this
+         */
+        </span><span class="jsdoc-string">&quot;expanded&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event slideshow
+         * Fires when this region is slid into view.
+         * @param {Roo.LayoutRegion} this
+         */
+        </span><span class="jsdoc-string">&quot;slideshow&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event slidehide
+         * Fires when this region slides out of view. 
+         * @param {Roo.LayoutRegion} this
+         */
+        </span><span class="jsdoc-string">&quot;slidehide&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event panelactivated
+         * Fires when a panel is activated. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The activated panel
+         */
+        </span><span class="jsdoc-string">&quot;panelactivated&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event resized
+         * Fires when the user resizes this region. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        </span><span class="jsdoc-string">&quot;resized&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-comment">/** A collection of panels in this region. @type Roo.util.MixedCollection */
+    </span><span class="jsdoc-var">this.panels </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">this.panels.getKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanelId.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-comment">// ensure listeners are added...
+    
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.listeners </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.events</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">Roo.BasicLayoutRegion.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {
+            </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config.listeners </span><span class="jsdoc-syntax">|| {},
+            </span><span class="jsdoc-var">events </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config.events </span><span class="jsdoc-syntax">|| {}
+        });
+    }
+    
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">skipConfig </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.applyConfig</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    }
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.BasicLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">getPanelId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">p.getId</span><span class="jsdoc-syntax">();
+    },
+    
+    </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">){
+        </span><span class="jsdoc-var">this.margins </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.margins </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.margins </span><span class="jsdoc-syntax">|| {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 0};
+        </span><span class="jsdoc-var">this.config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
+     * the width, for horizontal (north, south) the height.
+     * @param {Number} newSize The new width or height
+     */
+    </span><span class="jsdoc-var">resizeTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">:
+                 (</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">);
+                    </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">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">);
+                    </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">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;                
+            }
+        }
+    },
+    
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">getMargins </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.margins</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">el.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">el.dom.style.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.activePanel.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">setActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.activePanel.setActiveState</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setLeftTop</span><span class="jsdoc-syntax">(-10000,-10000);
+        }
+        </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">panel.setActiveState</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.box</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">panel.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.box.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelactivated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </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-comment">/**
+     * Show the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    </span><span class="jsdoc-var">getActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Add the passed ContentPanel(s)
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added)
+     */
+    </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+               </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+            }
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.parentNode </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.mgr.el.dom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.mgr.el.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.setRegion</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">panel.setRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.panels.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">panel.background</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.initialSize </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">()==1){
+                </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.initialSize</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns true if the panel is in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Boolean}
+     */
+    </span><span class="jsdoc-var">hasPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// must be panel obj
+            </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel.getId</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= {};
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeremove&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.cancel </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">panelId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel.getId</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.panels.removeKey</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the panel specified or null if it's not in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Roo.ContentPanel}
+     */
+    </span><span class="jsdoc-var">getPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// must be panel obj
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.panels.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns this regions position (north/south/east/west/center).
+     * @return {String} 
+     */
+    </span><span class="jsdoc-var">getPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">;    
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_BorderLayout.js.html b/docs/symbols/src/Roo_BorderLayout.js.html
new file mode 100644 (file)
index 0000000..75f7fb4
--- /dev/null
@@ -0,0 +1,581 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/BorderLayout.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.BorderLayout
+ * @extends Roo.LayoutManager
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: &lt;br&gt;&lt;br&gt;
+ * &lt;a href=&quot;http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/&quot;&gt;Cross Browser Layouts - Part 1&lt;/a&gt;&lt;br&gt;
+ * &lt;a href=&quot;http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/&quot;&gt;Cross Browser Layouts - Part 2&lt;/a&gt;&lt;br&gt;&lt;br&gt;
+ * Example:
+ &lt;pre&gt;&lt;code&gt;
+ var layout = new Roo.BorderLayout(document.body, {
+    north: {
+        initialSize: 25,
+        titlebar: false
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150
+    }
+});
+
+// shorthand
+var CP = Roo.ContentPanel;
+
+layout.beginUpdate();
+layout.add(&quot;north&quot;, new CP(&quot;north&quot;, &quot;North&quot;));
+layout.add(&quot;south&quot;, new CP(&quot;south&quot;, {title: &quot;South&quot;, closable: true}));
+layout.add(&quot;west&quot;, new CP(&quot;west&quot;, {title: &quot;West&quot;}));
+layout.add(&quot;east&quot;, new CP(&quot;autoTabs&quot;, {title: &quot;Auto Tabs&quot;, closable: true}));
+layout.add(&quot;center&quot;, new CP(&quot;center1&quot;, {title: &quot;Close Me&quot;, closable: true}));
+layout.add(&quot;center&quot;, new CP(&quot;center2&quot;, {title: &quot;Center Panel&quot;, closable: false}));
+layout.getRegion(&quot;center&quot;).showPanel(&quot;center1&quot;);
+layout.endUpdate();
+&lt;/code&gt;&lt;/pre&gt;
+
+&lt;b&gt;The container the layout is rendered into can be either the body element or any other element.
+If it is not the body element, the container needs to either be an absolute positioned element,
+or you will need to add &quot;position:relative&quot; to the css of the container.  You will also need to specify
+the container size if it is not the body element.&lt;/b&gt;
+
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
+ */
+</span><span class="jsdoc-var">Roo.BorderLayout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
+    </span><span class="jsdoc-var">Roo.BorderLayout.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.factory </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.factory </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.BorderLayout.RegionFactory</span><span class="jsdoc-syntax">;
+    </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.validRegions.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.validRegions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]){
+           </span><span class="jsdoc-var">this.addRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]);
+       }
+    }
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.LayoutManager</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * Creates and adds a new region if it doesn't already exist.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Object} config The regions config object
+     * @return {BorderLayoutRegion} The new region
+     */
+    </span><span class="jsdoc-var">addRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.create</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</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">);
+           </span><span class="jsdoc-var">this.bindRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">];
+    },
+
+    </span><span class="jsdoc-comment">// private (kinda)
+    </span><span class="jsdoc-var">bindRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibilitychange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelremoved&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resized&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionResized</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;collapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionCollapsed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;expanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionExpanded</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Performs a layout update.
+     */
+    </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.updating</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getViewSize</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-comment">//var x = 0, y = 0;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">north </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">south </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">]; 
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">west </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">east </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-comment">//if(this.hideOnLayout){ // not supported anymore
+            //c.el.setStyle(&quot;display&quot;, &quot;none&quot;);
+        //}
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">north </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">north.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">north.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">north.getMargins</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">centerY</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">north.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">south </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">south.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">south.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">south.getMargins</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalHeight </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalHeight</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">south.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">west </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">west.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">west.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">west.getMargins</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">west.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">east </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">east.isVisible</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">east.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">east.getMargins</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">east.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">center.getMargins</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerBox </span><span class="jsdoc-syntax">= {
+                </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">)
+            };
+            </span><span class="jsdoc-comment">//if(this.hideOnLayout){
+                //center.el.setStyle(&quot;display&quot;, &quot;block&quot;);
+            //}
+            </span><span class="jsdoc-var">center.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">centerBox</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-var">this.el.repaint</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;layout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">safeBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Adds a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Roo.ContentPanel} panel The panel to add
+     * @return {Roo.ContentPanel} The added panel
+     */
+    </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+         
+        </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Remove a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
+     * @return {Roo.ContentPanel} The removed panel
+     */
+    </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Searches all regions for a panel with the specified id
+     * @param {String} panelId
+     * @return {Roo.ContentPanel} The panel or null if it wasn't found
+     */
+    </span><span class="jsdoc-var">findPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
+                }
+            }
+        }
+        </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Searches all regions for a panel with the specified id and activates (shows) it.
+     * @param {String/ContentPanel} panelId The panels id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">) {
+      </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
+      </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">){
+         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">];
+         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.hasPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">)){
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
+            }
+         }
+      }
+      </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+   },
+
+   </span><span class="jsdoc-comment">/**
+     * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
+     * @param {Roo.state.Provider} provider (optional) An alternate state provider
+     */
+    </span><span class="jsdoc-var">restoreState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">provider </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.state.Manager</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.LayoutStateManager</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">sm.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
+     * object should contain properties for each region to add ContentPanels to, and each property's value should be
+     * a valid ContentPanel config object.  Example:
+     * &lt;pre&gt;&lt;code&gt;
+// Create the main layout
+var layout = new Roo.BorderLayout('main-ct', {
+    west: {
+        split:true,
+        minSize: 175,
+        titlebar: true
+    },
+    center: {
+        title:'Components'
+    }
+}, 'main-ct');
+
+// Create and add multiple ContentPanels at once via configs
+layout.batchAdd({
+   west: {
+       id: 'source-files',
+       autoCreate:true,
+       title:'Ext Source Files',
+       autoScroll:true,
+       fitToFrame:true
+   },
+   center : {
+       el: cview,
+       autoScroll:true,
+       fitToFrame:true,
+       toolbar: tb,
+       resizeEl:'cbody'
+   }
+});
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {Object} regions An object containing ContentPanel configs by region name
+     */
+    </span><span class="jsdoc-var">batchAdd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rname </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">rname</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">rname</span><span class="jsdoc-syntax">]);
+            }
+        }
+        </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">addTypedPanels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ps.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">this.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+            }
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ps.events</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// raw config?
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ps.el</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">ps.el</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// prevent conflict
+            </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{  </span><span class="jsdoc-comment">// panel object assumed!
+            </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">/**
+     * Adds a xtype elements to the layout.
+     * &lt;pre&gt;&lt;code&gt;
+
+layout.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+layout.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    </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">cfg</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-comment">// basically accepts a pannel...
+        // can accept a layout region..!?!?
+       // console.log('BorderLayout add ' + cfg.xtype)
+        
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cfg.xtype.match</span><span class="jsdoc-syntax">(/Panel$/)) {
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </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">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">;
+        
+          
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">;
+        }
+        
+        
+        </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">) 
+        {
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ContentPanel'</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-comment">// ContentPanel (el, cfg)
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.autoCreate</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
+                </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
+                </span><span class="jsdoc-syntax">}
+                
+                </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            
+            
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'TreePanel'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-comment">// our new panel!
+                </span><span class="jsdoc-var">cfg.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
+                </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'NestedLayoutPanel'</span><span class="jsdoc-syntax">: 
+                </span><span class="jsdoc-comment">// create a new Layout (which is  a Border Layout...
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">clayout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">clayout.items   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items  </span><span class="jsdoc-syntax">|| [];
+                </span><span class="jsdoc-comment">// replace this exitems with the clayout ones..
+                </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items</span><span class="jsdoc-syntax">;
+                 
+                
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.panels.length </span><span class="jsdoc-syntax">&lt; 1) {
+                    </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">clayout</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
+                //console.log('adding nested layout panel '  + cfg.toSource());
+                </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'GridPanel'</span><span class="jsdoc-syntax">: 
+            
+                </span><span class="jsdoc-comment">// needs grid and region
+                
+                //var el = this.getRegion(region).el.createChild();
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-comment">// create the grid first...
+                
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.grid.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">grid</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
+                
+                </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.background</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">ret.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">gp</span><span class="jsdoc-syntax">) {
+                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">gp.grid.rendered</span><span class="jsdoc-syntax">) {
+                            </span><span class="jsdoc-var">gp.grid.render</span><span class="jsdoc-syntax">();
+                        }
+                    });
+                } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">grid.render</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+           
+               
+                
+                
+            </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">: 
+                </span><span class="jsdoc-var">alert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Can not add '&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cfg.xtype </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;' to BorderLayout&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-comment">// GridPanel (grid, cfg)
+            
+        </span><span class="jsdoc-syntax">}
+        </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-comment">// add children..
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">)  {
+            </span><span class="jsdoc-var">ret.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
+        
+    }
+});
+
+</span><span class="jsdoc-comment">/**
+ * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
+ * the beginUpdate and endUpdate calls internally.  The key to this method is the &lt;b&gt;panels&lt;/b&gt; property that can be
+ * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
+ * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
+ * &lt;pre&gt;&lt;code&gt;
+// shorthand
+var CP = Roo.ContentPanel;
+
+var layout = Roo.BorderLayout.create({
+    north: {
+        initialSize: 25,
+        titlebar: false,
+        panels: [new CP(&quot;north&quot;, &quot;North&quot;)]
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP(&quot;west&quot;, {title: &quot;West&quot;})]
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP(&quot;autoTabs&quot;, {title: &quot;Auto Tabs&quot;, closable: true})]
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP(&quot;south&quot;, {title: &quot;South&quot;, closable: true})]
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150,
+        panels: [
+            new CP(&quot;center1&quot;, {title: &quot;Close Me&quot;, closable: true}),
+            new CP(&quot;center2&quot;, {title: &quot;Center Panel&quot;, closable: false})
+        ]
+    }
+}, document.body);
+
+layout.getRegion(&quot;center&quot;).showPanel(&quot;center1&quot;);
+&lt;/code&gt;&lt;/pre&gt;
+ * @param config
+ * @param targetEl
+ */
+</span><span class="jsdoc-var">Roo.BorderLayout.create </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">, </span><span class="jsdoc-var">targetEl</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targetEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">layout.beginUpdate</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">regions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.BorderLayout.RegionFactory.validRegions</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">jlen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">regions.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">jlen</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">] &amp;&amp; </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.panels</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.panels</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">layout.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">);
+        }
+    }
+    </span><span class="jsdoc-var">layout.endUpdate</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">;
+};
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Roo.BorderLayout.RegionFactory </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">validRegions </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">],
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">create </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</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">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.lightweight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.basic</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.BasicLayoutRegion</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">target</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.NorthLayoutRegion</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-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.SouthLayoutRegion</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-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.EastLayoutRegion</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-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.WestLayoutRegion</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-keyword">case </span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.CenterLayoutRegion</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-keyword">throw </span><span class="jsdoc-string">'Layout region &quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&quot; not supported.'</span><span class="jsdoc-syntax">;
+    }
+};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_BoxComponent.js.html b/docs/symbols/src/Roo_BoxComponent.js.html
new file mode 100644 (file)
index 0000000..03210f7
--- /dev/null
@@ -0,0 +1,283 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/BoxComponent.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.BoxComponent
+ * @extends Roo.Component
+ * Base class for any visual {@link Roo.Component} that uses a box container.  BoxComponent provides automatic box
+ * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model.  All
+ * container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
+ * layout containers.
+ * @constructor
+ * @param {Roo.Element/String/Object} config The configuration options.
+ */
+</span><span class="jsdoc-var">Roo.BoxComponent </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">){
+    </span><span class="jsdoc-var">Roo.Component.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">);
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+         * @event resize
+         * Fires after the component is resized.
+            * @param {Roo.Component} this
+            * @param {Number} adjWidth The box-adjusted width that was set
+            * @param {Number} adjHeight The box-adjusted height that was set
+            * @param {Number} rawWidth The width that was originally specified
+            * @param {Number} rawHeight The height that was originally specified
+            */
+        </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event move
+         * Fires after the component is moved.
+            * @param {Roo.Component} this
+            * @param {Number} x The new x position
+            * @param {Number} y The new y position
+            */
+        </span><span class="jsdoc-var">move </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.BoxComponent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">// private, set in afterRender to signify that the component has been rendered
+    </span><span class="jsdoc-var">boxReady </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">// private, used to defer height settings to subclasses
+    </span><span class="jsdoc-var">deferHeight</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/** @cfg {Number} width
+     * width (optional) size of component
+     */
+     /** @cfg {Number} height
+     * height (optional) size of component
+     */
+     
+    /**
+     * Sets the width and height of the component.  This method fires the resize event.  This method can accept
+     * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
+     * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
+     * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
+     * @return {Roo.BoxComponent} this
+     */
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-comment">// support for standard size objects
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w.height</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w.width</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-comment">// not rendered
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxReady</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-comment">// prevent recalcs when not needed
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastSize </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.lastSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.lastSize.height </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.lastSize </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">adj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.height</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// this code is nasty but performs better with floaters
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getResizeEl</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.deferHeight </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">rz.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.deferHeight </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">rz.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">rz.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Gets the current size of the component's underlying element.
+     * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
+     */
+    </span><span class="jsdoc-var">getSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Gets the current XY position of the component's underlying element.
+     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
+     * @return {Array} The XY position of the element (e.g., [100, 200])
+     */
+    </span><span class="jsdoc-var">getPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.el.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">this.el.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)];
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.getXY</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Gets the current box measurements of the component's underlying element.
+     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
+     * @returns {Object} box An object in the format {x, y, width, height}
+     */
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">s.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">s.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.getXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">s.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0];
+            </span><span class="jsdoc-var">s.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1];
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the current box measurements of the component's underlying element.
+     * @param {Object} box An object in the format {x, y, width, height}
+     * @returns {Roo.BoxComponent} this
+     */
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.setPagePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// protected
+    </span><span class="jsdoc-var">getResizeEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// protected
+    </span><span class="jsdoc-var">getPositionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.positionEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
+     * This method fires the move event.
+     * @param {Number} left The new left
+     * @param {Number} top The new top
+     * @returns {Roo.BoxComponent} this
+     */
+    </span><span class="jsdoc-var">setPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxReady</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">adj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.y</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPositionEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.setLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.onPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'move'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
+     * This method fires the move event.
+     * @param {Number} x The new x position
+     * @param {Number} y The new y position
+     * @returns {Roo.BoxComponent} this
+     */
+    </span><span class="jsdoc-var">setPagePosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.pageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.pageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxReady</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// cannot translate undefined points
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.translatePoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.setPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">p.top</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </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">){
+        </span><span class="jsdoc-var">Roo.BoxComponent.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">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.positionEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.positionEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.positionEl</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.BoxComponent.superclass.afterRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.boxReady </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.y</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.y</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pageX </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.pageY</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setPagePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.pageY</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Force the component's size to recalculate based on the underlying element's current height and width.
+     * @returns {Roo.BoxComponent} this
+     */
+    </span><span class="jsdoc-var">syncSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.lastSize</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.el.getHeight</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Called after the component is resized, this method is empty by default but can be implemented by any
+     * subclass that needs to perform custom logic after a resize occurs.
+     * @param {Number} adjWidth The box-adjusted width that was set
+     * @param {Number} adjHeight The box-adjusted height that was set
+     * @param {Number} rawWidth The width that was originally specified
+     * @param {Number} rawHeight The height that was originally specified
+     */
+    </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">adjWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">adjHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rawWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rawHeight</span><span class="jsdoc-syntax">){
+
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Called after the component is moved, this method is empty by default but can be implemented by any
+     * subclass that needs to perform custom logic after a move occurs.
+     * @param {Number} x The new x position
+     * @param {Number} y The new y position
+     */
+    </span><span class="jsdoc-var">onPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">adjustSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoHeight</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">adjustPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">};
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Button.js.html b/docs/symbols/src/Roo_Button.js.html
new file mode 100644 (file)
index 0000000..0ee5ca5
--- /dev/null
@@ -0,0 +1,536 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Button.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.Button
+ * @extends Roo.util.Observable
+ * Simple Button class
+ * @cfg {String} text The button text
+ * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+ * CSS property of the button by default, so if you want a mixed icon/text button, set cls:&quot;x-btn-text-icon&quot;)
+ * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
+ * @cfg {Object} scope The scope of the handler
+ * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
+ * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
+ * @cfg {Boolean} hidden True to start hidden (defaults to false)
+ * @cfg {Boolean} disabled True to start disabled (defaults to false)
+ * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+ * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
+   applies if enableToggle = true)
+ * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
+ * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+  an {@link Roo.util.ClickRepeater} config object (defaults to false).
+ * @constructor
+ * Create a new button
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.Button </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
+{
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">renderTo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.renderTo </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    }
+    
+    </span><span class="jsdoc-var">Roo.apply</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">);
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+            * @event click
+            * Fires when this button is clicked
+            * @param {Button} this
+            * @param {EventObject} e The click event
+            */
+           </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event toggle
+            * Fires when the &quot;pressed&quot; state of this button changes (only if enableToggle = true)
+            * @param {Button} this
+            * @param {Boolean} pressed
+            */
+           </span><span class="jsdoc-string">&quot;toggle&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event mouseover
+            * Fires when the mouse hovers over the button
+            * @param {Button} this
+            * @param {Event} e The event object
+            */
+        </span><span class="jsdoc-string">'mouseover' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event mouseout
+            * Fires when the mouse exits the button
+            * @param {Button} this
+            * @param {Event} e The event object
+            */
+        </span><span class="jsdoc-string">'mouseout'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+         </span><span class="jsdoc-comment">/**
+            * @event render
+            * Fires when the button is rendered
+            * @param {Button} this
+            */
+        </span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.menu.MenuMgr.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">);
+    }
+    
+    </span><span class="jsdoc-var">Roo.util.Observable.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Button</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * 
+     */
+    
+    /**
+     * Read-only. True if this button is hidden
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">hidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * Read-only. True if this button is disabled
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * Read-only. True if this button is pressed (only if enableToggle = true)
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">pressed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Number} tabIndex 
+     * The DOM tabIndex for this button (defaults to undefined)
+     */
+    </span><span class="jsdoc-var">tabIndex </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} enableToggle
+     * True to enable pressed/not pressed toggling (defaults to false)
+     */
+    </span><span class="jsdoc-var">enableToggle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Mixed} menu
+     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+     */
+    </span><span class="jsdoc-var">menu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} menuAlign
+     * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
+     */
+    </span><span class="jsdoc-var">menuAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;tl-bl?&quot;</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} iconCls
+     * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
+     */
+    </span><span class="jsdoc-var">iconCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} type
+     * The button's type, corresponding to the DOM input element type attribute.  Either &quot;submit,&quot; &quot;reset&quot; or &quot;button&quot; (default).
+     */
+    </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">menuClassTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} clickEvent
+     * The type of event to map to the button's event handler (defaults to 'click')
+     */
+    </span><span class="jsdoc-var">clickEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} handleMouseEvents
+     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
+     */
+    </span><span class="jsdoc-var">handleMouseEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} tooltipType
+     * The type of tooltip to use. Either &quot;qtip&quot; (default) for QuickTips or &quot;title&quot; for title attribute.
+     */
+    </span><span class="jsdoc-var">tooltipType </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} cls
+     * A CSS class to apply to the button's main element.
+     */
+    
+    /**
+     * @cfg {Roo.Template} template (Optional)
+     * An {@link Roo.Template} with which to create the Button's main element. This Template must
+     * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
+     * require code modifications if required elements (e.g. a button) aren't present.
+     */
+
+    // private
+    </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideParent</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.parentEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dhconfig</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.template</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.Button.buttonTemplate</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-comment">// hideous table template
+                    </span><span class="jsdoc-var">Roo.Button.buttonTemplate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(
+                        </span><span class="jsdoc-string">'&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;x-btn-wrap&quot;&gt;&lt;tbody&gt;&lt;tr&gt;'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'&lt;td class=&quot;x-btn-left&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-center&quot;&gt;&lt;em unselectable=&quot;on&quot;&gt;&lt;button class=&quot;x-btn-text&quot; type=&quot;{1}&quot;&gt;{0}&lt;/button&gt;&lt;/em&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-right&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">&quot;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&quot;</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-var">this.template </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Button.buttonTemplate</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.template.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'&amp;#160;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.type</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btnEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">btn.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;button:first&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">btnEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'focus'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onFocus</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">btnEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'blur'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBlur</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">btn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.icon</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">btnEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-image'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'url(' </span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.icon </span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.iconCls</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">btnEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.iconCls</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">btn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'x-btn-text-icon' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon'</span><span class="jsdoc-syntax">);
+                }
+            }
+            </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">){
+                </span><span class="jsdoc-var">btnEl.dom.tabIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabIndex</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.tooltip </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">Roo.QuickTips.tips</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
+                          </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">btnEl.id
+                    </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">));
+                } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">btnEl.dom</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.tooltipType</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">;
+                }
+            }
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dhconfig</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.dom.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menuClassTarget</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-with-menu&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.menu.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;show&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMenuShow</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.menu.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMenuHide</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">btn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">Roo.isIE7</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.autoWidth.defer</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handleMouseEvents</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseover&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOut</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//btn.on(&quot;mouseup&quot;, this.onMouseUp, this);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.disable</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">Roo.ButtonToggleMgr.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-pressed&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.repeat</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">repeater </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.ClickRepeater</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.repeat </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.repeat </span><span class="jsdoc-syntax">: {}
+            );
+            </span><span class="jsdoc-var">repeater.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.onClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+    },
+    </span><span class="jsdoc-comment">/**
+     * Returns the button's underlying element
+     * @return {Roo.Element} The element
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;  
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Destroys this Button and removes any listeners.
+     */
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.ButtonToggleMgr.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">autoWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE7 </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isStrict</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ib </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ib </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ib.getWidth</span><span class="jsdoc-syntax">() &gt; 20){
+                    </span><span class="jsdoc-var">ib.clip</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">ib.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.util.TextMetrics.measure</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ib</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">ib.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.el.beginMeasure</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">() &lt; </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.el.endMeasure</span><span class="jsdoc-syntax">();
+                }
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Assigns this button's click handler
+     * @param {Function} handler The function to call when the button is clicked
+     * @param {Object} scope (optional) Scope for the function passed in
+     */
+    </span><span class="jsdoc-var">setHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.handler </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">;  
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Sets this button's text
+     * @param {String} text The button text
+     */
+    </span><span class="jsdoc-var">setText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td.x-btn-center button.x-btn-text&quot;</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Gets the text for this button
+     * @return {String} The button text
+     */
+    </span><span class="jsdoc-var">getText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">;  
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Show this button
+     */
+    </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.hideParent</span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'parentEl' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'el'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Hide this button
+     */
+    </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.hideParent</span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'parentEl' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'el'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">);
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Convenience function for boolean show/hide
+     * @param {Boolean} visible True to show, false to hide
+     */
+    </span><span class="jsdoc-var">setVisible</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
+     * @param {Boolean} state (optional) Force a particular state
+     */
+    </span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? !</span><span class="jsdoc-var">this.pressed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.pressed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-pressed&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.pressed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-pressed&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.pressed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toggleHandler</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.toggleHandler.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">);
+            }
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Focus the button
+     */
+    </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button:first'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.focus</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Disable this button
+     */
+    </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-disabled&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Enable this button
+     */
+    </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-disabled&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Convenience function for boolean enable/disable
+     * @param {Boolean} enabled True to enable, false to disable
+     */
+    </span><span class="jsdoc-var">setDisabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;enable&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;disable&quot;</span><span class="jsdoc-syntax">]();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">!= 0){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enableToggle</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.toggle</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">this.menu.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.menuAlign</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-over&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.handler.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            }
+        }
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onMouseOver </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-over&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseover'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onMouseOut </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">){
+        </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">)){
+            </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-over&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseout'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onFocus </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-focus&quot;</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onBlur </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">){
+        </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-focus&quot;</span><span class="jsdoc-syntax">);
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onMouseDown </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">== 0){
+            </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-click&quot;</span><span class="jsdoc-syntax">);
+            </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">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onMouseUp </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">== 0){
+            </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-click&quot;</span><span class="jsdoc-syntax">);
+            </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">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onMenuShow </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">){
+        </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-menu-active&quot;</span><span class="jsdoc-syntax">);
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onMenuHide </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">){
+        </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-menu-active&quot;</span><span class="jsdoc-syntax">);
+    }   
+});
+
+</span><span class="jsdoc-comment">// Private utility class used by Button
+</span><span class="jsdoc-var">Roo.ButtonToggleMgr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+   </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groups </span><span class="jsdoc-syntax">= {};
+   
+   </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">toggleGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
+       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">];
+           </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">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">g.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.toggle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+               }
+           }
+       }
+   }
+   
+   </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+       </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+           }
+           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">];
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">] = [];
+           }
+           </span><span class="jsdoc-var">g.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
+           </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggleGroup</span><span class="jsdoc-syntax">);
+       },
+       
+       </span><span class="jsdoc-var">unregister </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+           }
+           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">];
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">g.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-var">btn.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggleGroup</span><span class="jsdoc-syntax">);
+           }
+       }
+   };
+}();</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_CenterLayoutRegion.js.html b/docs/symbols/src/Roo_CenterLayoutRegion.js.html
new file mode 100644 (file)
index 0000000..08db93b
--- /dev/null
@@ -0,0 +1,204 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/CenterLayoutRegion.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/*
+ * These classes are private internal classes
+ */
+</span><span class="jsdoc-var">Roo.CenterLayoutRegion </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">Roo.LayoutRegion.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-string">&quot;center&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.minWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.minWidth </span><span class="jsdoc-syntax">|| 20;
+    </span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.minHeight </span><span class="jsdoc-syntax">|| 20;
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.CenterLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.LayoutRegion</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-comment">// center panel can't be hidden
+    </span><span class="jsdoc-syntax">},
+    
+    </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-comment">// center panel can't be hidden
+    </span><span class="jsdoc-syntax">},
+    
+    </span><span class="jsdoc-var">getMinWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">getMinHeight</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">;
+    }
+});
+
+
+</span><span class="jsdoc-var">Roo.NorthLayoutRegion </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">Roo.LayoutRegion.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-string">&quot;north&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;n-resize&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.split.placement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.TOP</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.orientation </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.VERTICAL</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-split-v&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.initialSize </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.height</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.NorthLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.SplitLayoutRegion</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">orientation</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.SplitBar.VERTICAL</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.collapsedEl.getBox</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.split.el.getHeight</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.split.el.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.split.el.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.updateBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">Roo.LayoutRegion.prototype.updateBox.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+    }
+});
+
+</span><span class="jsdoc-var">Roo.SouthLayoutRegion </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">Roo.SplitLayoutRegion.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-string">&quot;south&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;s-resize&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.split.placement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.BOTTOM</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.orientation </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.VERTICAL</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-split-v&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.initialSize </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.height</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.SouthLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.SplitLayoutRegion</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">orientation</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.SplitBar.VERTICAL</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.collapsedEl.getBox</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.split.el.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.split.el.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.split.el.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.updateBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">Roo.LayoutRegion.prototype.updateBox.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+    }
+});
+
+</span><span class="jsdoc-var">Roo.EastLayoutRegion </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">Roo.SplitLayoutRegion.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-string">&quot;east&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;e-resize&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.split.placement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.RIGHT</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.orientation </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.HORIZONTAL</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-split-h&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.initialSize </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.width</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.EastLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.SplitLayoutRegion</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">orientation</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.SplitBar.HORIZONTAL</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.collapsedEl.getBox</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.split.el.getWidth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.split.el.getWidth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.split.el.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.updateBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">Roo.LayoutRegion.prototype.updateBox.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+    }
+});
+
+</span><span class="jsdoc-var">Roo.WestLayoutRegion </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">Roo.SplitLayoutRegion.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-string">&quot;west&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;w-resize&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.split.placement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.LEFT</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.orientation </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SplitBar.HORIZONTAL</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.split.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-split-h&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.initialSize </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.width</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.WestLayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.SplitLayoutRegion</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">orientation</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.SplitBar.HORIZONTAL</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.collapsedEl.getBox</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.split.el.getWidth</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.split.el.getWidth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.split.el.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.split.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.updateBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">Roo.LayoutRegion.prototype.updateBox.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+    }
+});
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_ColorPalette.js.html b/docs/symbols/src/Roo_ColorPalette.js.html
new file mode 100644 (file)
index 0000000..72d59ef
--- /dev/null
@@ -0,0 +1,148 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/ColorPalette.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.ColorPalette
+ * @extends Roo.Component
+ * Simple color palette class for choosing colors.  The palette can be rendered to any container.&lt;br /&gt;
+ * Here's an example of typical usage:
+ * &lt;pre&gt;&lt;code&gt;
+var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
+cp.render('my-div');
+
+cp.on('select', function(palette, selColor){
+    // do something with selColor
+});
+&lt;/code&gt;&lt;/pre&gt;
+ * @constructor
+ * Create a new ColorPalette
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.ColorPalette </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">){
+    </span><span class="jsdoc-var">Roo.ColorPalette.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">);
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+            * @event select
+            * Fires when a color is selected
+            * @param {ColorPalette} this
+            * @param {String} color The 6-digit color hex code (without the # symbol)
+            */
+        </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.ColorPalette</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} itemCls
+     * The CSS class to apply to the containing element (defaults to &quot;x-color-palette&quot;)
+     */
+    </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-color-palette&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} value
+     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
+     * the hex codes are case-sensitive.
+     */
+    </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.ColorPalette&quot;</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
+     */
+    </span><span class="jsdoc-var">allowReselect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * &lt;p&gt;An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
+     * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
+     * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
+     * of colors with the width setting until the box is symmetrical.&lt;/p&gt;
+     * &lt;p&gt;You can override individual colors if needed:&lt;/p&gt;
+     * &lt;pre&gt;&lt;code&gt;
+var cp = new Roo.ColorPalette();
+cp.colors[0] = &quot;FF0000&quot;;  // change the first box to red
+&lt;/code&gt;&lt;/pre&gt;
+
+Or you can provide a custom array of your own for complete control:
+&lt;pre&gt;&lt;code&gt;
+var cp = new Roo.ColorPalette();
+cp.colors = [&quot;000000&quot;, &quot;993300&quot;, &quot;333300&quot;];
+&lt;/code&gt;&lt;/pre&gt;
+     * @type Array
+     */
+    </span><span class="jsdoc-var">colors </span><span class="jsdoc-syntax">: [
+        </span><span class="jsdoc-string">&quot;000000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;993300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;003300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;003366&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;000080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333399&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333333&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;800000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FF6600&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;808000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;008000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;008080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;0000FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;666699&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;808080&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;FF0000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FF9900&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;99CC00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;339966&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;33CCCC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;3366FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;800080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;969696&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;FF00FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFCC00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFF00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00FF00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00FFFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00CCFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;993366&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;C0C0C0&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;FF99CC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFCC99&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFF99&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CCFFCC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CCFFFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;99CCFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CC99FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFFFF&quot;
+    </span><span class="jsdoc-syntax">],
+
+    </span><span class="jsdoc-comment">// private
+    </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">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.MasterTemplate</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-string">'&lt;tpl&gt;&lt;a href=&quot;#&quot; class=&quot;color-{0}&quot; hidefocus=&quot;on&quot;&gt;&lt;em&gt;&lt;span style=&quot;background:#{0}&quot; unselectable=&quot;on&quot;&gt;&amp;#160;&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;/tpl&gt;'
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colors</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">t.add</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.itemCls</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">t.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">container.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.ColorPalette.superclass.afterRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">handleClick </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">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t.className.match</span><span class="jsdoc-syntax">(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
+            </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.toUpperCase</span><span class="jsdoc-syntax">());
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Selects the specified color in the palette (fires the select event)
+     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
+     */
+    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.allowReselect</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a.color-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-color-palette-sel&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a.color-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-color-palette-sel&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">);
+        }
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Component.js.html b/docs/symbols/src/Roo_Component.js.html
new file mode 100644 (file)
index 0000000..61079b0
--- /dev/null
@@ -0,0 +1,418 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.Component
+ * @extends Roo.util.Observable
+ * Base class for all major Roo components.  All subclasses of Component can automatically participate in the standard
+ * Roo component lifecycle of creation, rendering and destruction.  They also have automatic support for basic hide/show
+ * and enable/disable behavior.  Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
+ * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
+ * All visual components (widgets) that require rendering into a layout should subclass Component.
+ * @constructor
+ * @param {Roo.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
+ * element and its id used as the component id.  If a string is passed, it is assumed to be the id of an existing element
+ * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
+ */
+</span><span class="jsdoc-var">Roo.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">){
+    </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.dom </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// element object
+        </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">};
+    }
+    </span><span class="jsdoc-var">this.initialConfig </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-var">Roo.apply</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">);
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+         * @event disable
+         * Fires after the component is disabled.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event enable
+         * Fires after the component is enabled.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforeshow
+         * Fires before the component is shown.  Return false to stop the show.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">beforeshow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event show
+         * Fires after the component is shown.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforehide
+         * Fires before the component is hidden. Return false to stop the hide.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">beforehide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event hide
+         * Fires after the component is hidden.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforerender
+         * Fires before the component is rendered. Return false to stop the render.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">beforerender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event render
+         * Fires after the component is rendered.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforedestroy
+         * Fires before the component is destroyed. Return false to stop the destroy.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">beforedestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event destroy
+         * Fires after the component is destroyed.
+            * @param {Roo.Component} this
+            */
+        </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;ext-comp-&quot; </span><span class="jsdoc-syntax">+ (++</span><span class="jsdoc-var">Roo.Component.AUTO_ID</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">Roo.ComponentMgr.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">Roo.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">this.initComponent</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.renderTo</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// not supported by all components yet. use at your own risk!
+        </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.renderTo</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.renderTo</span><span class="jsdoc-syntax">;
+    }
+};
+
+</span><span class="jsdoc-comment">// private
+</span><span class="jsdoc-var">Roo.Component.AUTO_ID </span><span class="jsdoc-syntax">= 1000;
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * @property {Boolean} hidden
+     * true if this component is hidden. Read-only.
+     */
+    </span><span class="jsdoc-var">hidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * true if this component is disabled. Read-only.
+     */
+    </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * true if this component has been rendered. Read-only.
+     */
+    </span><span class="jsdoc-var">rendered </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-comment">/** @cfg {String} disableClass
+     * CSS class added to the component when it is disabled (defaults to &quot;x-item-disabled&quot;).
+     */
+    </span><span class="jsdoc-var">disabledClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-item-disabled&quot;</span><span class="jsdoc-syntax">,
+       </span><span class="jsdoc-comment">/** @cfg {Boolean} allowDomMove
+        * Whether the component can move the Dom node when rendering (defaults to true).
+        */
+    </span><span class="jsdoc-var">allowDomMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/** @cfg {String} hideMode
+     * How this component should hidden. Supported values are
+     * &quot;visibility&quot; (css visibility), &quot;offsets&quot; (negative offset position) and
+     * &quot;display&quot; (css display) - defaults to &quot;display&quot;.
+     */
+    </span><span class="jsdoc-var">hideMode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">ctype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.Component&quot;</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/** @cfg {String} actionMode 
+     * which property holds the element that used for  hide() / show() / disable() / enable()
+     * default is 'el' 
+     */
+    </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;el&quot;</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">getActionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.actionMode</span><span class="jsdoc-syntax">];
+    },
+
+    </span><span class="jsdoc-var">initComponent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * If this is a lazy rendering component, render it to its container element.
+     * @param {String/HTMLElement/Element} container (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
+     */
+    </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforerender&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.parentNode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.allowDomMove </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container.dom.childNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">];
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-var">this.onRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
+            }
+            </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-var">this.el.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;render&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.afterRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.disable</span><span class="jsdoc-syntax">();
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    // default function is not really useful
+    </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowDomMove </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">ct.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.autoCreate </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">?
+                      </span><span class="jsdoc-var">this.autoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">this.defaultAutoCreate</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">cfg.id</span><span class="jsdoc-syntax">){
+            </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-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Destroys this component by purging any event listeners, removing the component's element from the DOM,
+     * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
+     */
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforedestroy&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.beforeDestroy</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.actionMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;container&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.container.remove</span><span class="jsdoc-syntax">();
+                }
+            }
+            </span><span class="jsdoc-var">this.onDestroy</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">Roo.ComponentMgr.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;destroy&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+
+       </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">beforeDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+
+    },
+
+       </span><span class="jsdoc-comment">// private
+       </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the underlying {@link Roo.Element}.
+     * @return {Roo.Element} The element
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the id of this component.
+     * @return {String}
+     */
+    </span><span class="jsdoc-var">getId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Try to focus this component.
+     * @param {Boolean} selectText True to also select the text in this component (if applicable)
+     * @return {Roo.Component} this
+     */
+    </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectText</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.focus</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectText </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.dom.select</span><span class="jsdoc-syntax">();
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">blur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.blur</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Disable this component.
+     * @return {Roo.Component} this
+     */
+    </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.onDisable</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;disable&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onDisable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabledClass</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.dom.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Enable this component.
+     * @return {Roo.Component} this
+     */
+    </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.onEnable</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;enable&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onEnable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabledClass</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.dom.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Convenience function for setting disabled/enabled by boolean.
+     * @param {Boolean} disabled
+     */
+    </span><span class="jsdoc-var">setDisabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">disabled</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;disable&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;enable&quot;</span><span class="jsdoc-syntax">]();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Show this component.
+     * @return {Roo.Component} this
+     */
+    </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeshow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.onShow</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;show&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ae </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'visibility'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ae.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'offsets'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ae.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-hidden'</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Hide this component.
+     * @return {Roo.Component} this
+     */
+    </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforehide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.onHide</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ae </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'visibility'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ae.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'offsets'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ae.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-hidden'</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Convenience function to hide or show this component by boolean.
+     * @param {Boolean} visible True to show, false to hide
+     * @return {Roo.Component} this
+     */
+    </span><span class="jsdoc-var">setVisible</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this component is visible.
+     */
+    </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.isVisible</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">cloneConfig </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">|| {};
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">overrides.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.initialConfig</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// prevent dup id
+        </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">this.constructor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_ComponentMgr.js.html b/docs/symbols/src/Roo_ComponentMgr.js.html
new file mode 100644 (file)
index 0000000..95d96d2
--- /dev/null
@@ -0,0 +1,61 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/ComponentMgr.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.ComponentMgr
+ * Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
+ * @singleton
+ */
+</span><span class="jsdoc-var">Roo.ComponentMgr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">all </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">();
+
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-comment">/**
+         * Registers a component.
+         * @param {Roo.Component} c The component
+         */
+        </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">all.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Unregisters a component.
+         * @param {Roo.Component} c The component
+         */
+        </span><span class="jsdoc-var">unregister </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">all.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns a component by id
+         * @param {String} id The component id
+         */
+        </span><span class="jsdoc-var">get </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">all.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Registers a function that will be called when a specified component is added to ComponentMgr
+         * @param {String} id The component id
+         * @param {Funtction} fn The callback function
+         * @param {Object} scope The scope of the callback
+         */
+        </span><span class="jsdoc-var">onAvailable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">all.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;add&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">all.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;add&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">);
+                }
+            });
+        }
+    };
+}();</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_CompositeElement.js.html b/docs/symbols/src/Roo_CompositeElement.js.html
new file mode 100644 (file)
index 0000000..eaaba0a
--- /dev/null
@@ -0,0 +1,237 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/CompositeElement.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+
+/**
+ * @class Roo.CompositeElement
+ * Standard composite class. Creates a Roo.Element for every element in the collection.
+ * &lt;br&gt;&lt;br&gt;
+ * &lt;b&gt;NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
+ * actions will be performed on all the elements in this collection.&lt;/b&gt;
+ * &lt;br&gt;&lt;br&gt;
+ * All methods return &lt;i&gt;this&lt;/i&gt; and can be chained.
+ &lt;pre&gt;&lt;code&gt;
+ var els = Roo.select(&quot;#some-el div.some-class&quot;, true);
+ // or select directly from an existing element
+ var el = Roo.get('some-el');
+ el.select('div.some-class', true);
+
+ els.setWidth(100); // all elements become 100 width
+ els.hide(true); // all elements fade out and hide
+ // or
+ els.setWidth(100).hide(true);
+ &lt;/code&gt;&lt;/pre&gt;
+ */
+</span><span class="jsdoc-var">Roo.CompositeElement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">this.elements </span><span class="jsdoc-syntax">= [];
+    </span><span class="jsdoc-var">this.addElements</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+};
+</span><span class="jsdoc-var">Roo.CompositeElement.prototype </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-var">isComposite</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">addElements </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Element.selectorFunction</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">yels </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">yels.length</span><span class="jsdoc-syntax">-1;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+               </span><span class="jsdoc-var">yels</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+    * Clears this composite and adds the elements returned by the passed selector.
+    * @param {String/Array} els A string CSS selector, an array of elements or an element
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">fill </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.elements </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+    * Filters this composite to only elements that match the passed selector.
+    * @param {String} selector A string CSS selector
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">filter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.each</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">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">;
+            }
+        });
+        </span><span class="jsdoc-var">this.fill</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">invoke </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+               </span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    </span><span class="jsdoc-comment">/**
+    * Adds elements to this composite.
+    * @param {String/Array} els A string CSS selector, an array of elements or an element
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.addElements</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.selectorFunction</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">));
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els.length </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.addElements</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.addElements</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">]);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    </span><span class="jsdoc-comment">/**
+    * Calls the passed function passing (el, this, index) for each element in this composite.
+    * @param {Function} fn The function to call
+    * @param {Object} scope (optional) The &lt;i&gt;this&lt;/i&gt; object (defaults to the element)
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">each </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the Element object at the specified index
+     * @param {Number} index
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">] || </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the first Element
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">first </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.item</span><span class="jsdoc-syntax">(0);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the last Element
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">last </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.item</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.elements.length</span><span class="jsdoc-syntax">-1);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the number of elements in this composite
+     * @return Number
+     */
+    </span><span class="jsdoc-var">getCount </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.elements.length</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this composite contains the passed element
+     * @return Boolean
+     */
+    </span><span class="jsdoc-var">contains </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">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">) !== -1;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this composite contains the passed element
+     * @return Boolean
+     */
+    </span><span class="jsdoc-var">indexOf </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">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.elements.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">));
+    },
+
+
+    </span><span class="jsdoc-comment">/**
+    * Removes the specified element(s).
+    * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
+    * or an array of any of those.
+    * @param {Boolean} removeDom (optional) True to also remove the element from the document
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">removeElement </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">, </span><span class="jsdoc-var">removeDom</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">this.removeElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">!== -1){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeDom</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.dom</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">d.remove</span><span class="jsdoc-syntax">();
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">d.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-var">this.elements.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+    * Replaces the specified element with the passed element.
+    * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
+    * to replace.
+    * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
+    * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">replaceElement </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">, </span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">domReplace</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">!== -1){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">domReplace</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.replaceWith</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.elements.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1, </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">))
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Removes all elements.
+     */
+    </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.elements </span><span class="jsdoc-syntax">= [];
+    }
+};
+(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-var">Roo.CompositeElement.createCall </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proto</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">proto</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">]){
+            </span><span class="jsdoc-var">proto</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.invoke</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+            };
+        }
+    };
+    </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fnName </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.CompositeElement.createCall</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.CompositeElement.prototype</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">);
+        }
+    };
+})();
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_CompositeElementLite.js.html b/docs/symbols/src/Roo_CompositeElementLite.js.html
new file mode 100644 (file)
index 0000000..1ffba32
--- /dev/null
@@ -0,0 +1,120 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/CompositeElementLite.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.CompositeElementLite
+ * @extends Roo.CompositeElement
+ * Flyweight composite class. Reuses the same Roo.Element for element operations.
+ &lt;pre&gt;&lt;code&gt;
+ var els = Roo.select(&quot;#some-el div.some-class&quot;);
+ // or select directly from an existing element
+ var el = Roo.get('some-el');
+ el.select('div.some-class');
+
+ els.setWidth(100); // all elements become 100 width
+ els.hide(true); // all elements fade out and hide
+ // or
+ els.setWidth(100).hide(true);
+ &lt;/code&gt;&lt;/pre&gt;&lt;br&gt;&lt;br&gt;
+ * &lt;b&gt;NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
+ * actions will be performed on all the elements in this collection.&lt;/b&gt;
+ */
+</span><span class="jsdoc-var">Roo.CompositeElementLite </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.CompositeElementLite.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Element.Flyweight</span><span class="jsdoc-syntax">();
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.CompositeElementLite</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.CompositeElement</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">addElements </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.elements </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">yels </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">yels.length</span><span class="jsdoc-syntax">-1;
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                    </span><span class="jsdoc-var">yels</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                }
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    </span><span class="jsdoc-var">invoke </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+               </span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    </span><span class="jsdoc-comment">/**
+     * Returns a flyweight Element of the dom element object at the specified index
+     * @param {Number} index
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">]){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// fixes scope with flyweight
+    </span><span class="jsdoc-var">addListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+    * Calls the passed function passing (el, this, index) for each element in this composite. &lt;b&gt;The element
+    * passed is the flyweight (shared) Roo.Element instance, so if you require a
+    * a reference to the dom node, use el.dom.&lt;/b&gt;
+    * @param {Function} fn The function to call
+    * @param {Object} scope (optional) The &lt;i&gt;this&lt;/i&gt; object (defaults to the element)
+    * @return {CompositeElement} this
+    */
+    </span><span class="jsdoc-var">each </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">indexOf </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">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.elements.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">));
+    },
+
+    </span><span class="jsdoc-var">replaceElement </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">, </span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">domReplace</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">!== -1){
+            </span><span class="jsdoc-var">replacement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">domReplace</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.elements</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-var">d.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">d.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.elements.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1, </span><span class="jsdoc-var">replacement</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    }
+});
+</span><span class="jsdoc-var">Roo.CompositeElementLite.prototype.on </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.CompositeElementLite.prototype.addListener</span><span class="jsdoc-syntax">;
+
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_ContentPanel.js.html b/docs/symbols/src/Roo_ContentPanel.js.html
new file mode 100644 (file)
index 0000000..3bc31af
--- /dev/null
@@ -0,0 +1,683 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/ContentPanel.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.ContentPanel
+ * @extends Roo.util.Observable
+ * A basic ContentPanel element.
+ * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes  (defaults to false)
+ * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
+ * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
+ * @cfg {Boolean} closable True if the panel can be closed/removed
+ * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Toolbar} toolbar A toolbar for this panel
+ * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title The title for this panel
+ * @cfg {Array} adjustments Values to &lt;b&gt;add&lt;/b&gt; to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url Calls {@link #setUrl} with this value
+ * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
+ * @constructor
+ * Create a new ContentPanel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+</span><span class="jsdoc-var">Roo.ContentPanel </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">){
+    
+     
+    </span><span class="jsdoc-comment">/*
+    if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    if (config &amp;&amp; config.parentLayout) { 
+        el = config.parentLayout.el.createChild(); 
+    }
+    */
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.autoCreate</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// xtype is available if this is called from factory
+        </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
+    }
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config.autoCreate</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.autoCreate </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">config.autoCreate.id</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">config.autoCreate.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.id</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">config.autoCreate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">,
+                        {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config.id</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+    }
+    </span><span class="jsdoc-var">this.closable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">Roo.apply</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">);
+    }
+    
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toolbar </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.toolbar.el </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.toolbar.xtype</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">this.wrapEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">();    
+        </span><span class="jsdoc-var">this.toolbar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.insertSibling</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'before'</span><span class="jsdoc-syntax">), [] , </span><span class="jsdoc-var">this.toolbar</span><span class="jsdoc-syntax">);
+        
+    }
+    
+    
+    
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    }
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+         * @event activate
+         * Fires when this panel is activated. 
+         * @param {Roo.ContentPanel} this
+         */
+        </span><span class="jsdoc-string">&quot;activate&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event deactivate
+         * Fires when this panel is activated. 
+         * @param {Roo.ContentPanel} this
+         */
+        </span><span class="jsdoc-string">&quot;deactivate&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/**
+         * @event resize
+         * Fires when this panel is resized if fitToFrame is true.
+         * @param {Roo.ContentPanel} this
+         * @param {Number} width The width after any component adjustments
+         * @param {Number} height The height after any component adjustments
+         */
+        </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoScroll</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.resizeEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">content </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">content </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.content</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.setContent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config.url</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.setUrl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.loadOnce</span><span class="jsdoc-syntax">);
+    }
+    
+    
+    
+    </span><span class="jsdoc-var">Roo.ContentPanel.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">tabTip</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">setRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-var">this.el.replaceClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-active-content&quot;</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+           </span><span class="jsdoc-var">this.el.replaceClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-active-content&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">);
+        } 
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the toolbar for this Panel if one was configured. 
+     * @return {Roo.Toolbar} 
+     */
+    </span><span class="jsdoc-var">getToolbar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.toolbar</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">setActiveState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">active</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">active</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">active</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;deactivate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+    </span><span class="jsdoc-comment">/**
+     * Updates this panel's element
+     * @param {String} content The new content
+     * @param {Boolean} loadScripts (optional) true to look for and process scripts
+    */
+    </span><span class="jsdoc-var">setContent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">ignoreResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastSize </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.lastSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.lastSize.height </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.lastSize </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+    },
+    </span><span class="jsdoc-comment">/**
+     * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    </span><span class="jsdoc-var">getUpdateManager </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+    },
+     </span><span class="jsdoc-comment">/**
+     * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+     * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+&lt;pre&gt;&lt;code&gt;
+panel.load({
+    url: &quot;your-url.php&quot;,
+    params: {param1: &quot;foo&quot;, param2: &quot;bar&quot;}, // or a URL encoded string
+    callback: yourFunction,
+    scope: yourObject, //(optional scope)
+    discardUrl: false,
+    nocache: false,
+    text: &quot;Loading...&quot;,
+    timeout: 30,
+    scripts: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+     * The only required property is &lt;i&gt;url&lt;/i&gt;. The optional properties &lt;i&gt;nocache&lt;/i&gt;, &lt;i&gt;text&lt;/i&gt; and &lt;i&gt;scripts&lt;/i&gt;
+     * are shorthand for &lt;i&gt;disableCaching&lt;/i&gt;, &lt;i&gt;indicatorText&lt;/i&gt; and &lt;i&gt;loadScripts&lt;/i&gt; and are used to set their associated property on this panel UpdateManager instance.
+     * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string &quot;param1=1&amp;amp;param2=2&quot; or an object {param1: 1, param2: 2}
+     * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+     * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+     * @return {Roo.ContentPanel} this
+     */
+    </span><span class="jsdoc-var">load </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">um </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">um.update.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">um</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+
+    </span><span class="jsdoc-comment">/**
+     * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+     * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+     * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+     * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    </span><span class="jsdoc-var">setUrl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadOnce</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.refreshDelegate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._handleRefresh.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadOnce</span><span class="jsdoc-syntax">]);
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">_handleRefresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadOnce</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">loadOnce </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.loaded</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">updater </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">updater.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._setLoaded.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
+        }
+    },
+    
+    </span><span class="jsdoc-var">_setLoaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    }, 
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns this panel's id
+     * @return {String} 
+     */
+    </span><span class="jsdoc-var">getId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.id</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/** 
+     * Returns this panel's element - used by regiosn to add.
+     * @return {Roo.Element} 
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.wrapEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">adjustForComponents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toolbar</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">te </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toolbar.getEl</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">te.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">te.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.adjustments</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.adjustments</span><span class="jsdoc-syntax">[0];
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.adjustments</span><span class="jsdoc-syntax">[1];
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-string">&quot;width&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;height&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">};
+    },
+    
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fitToFrame </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.ignoreResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fitContainer </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustForComponents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.resizeEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoWidth </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.autoHeight </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns this panel's title
+     * @return {String} 
+     */
+    </span><span class="jsdoc-var">getTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Set this panel's title
+     * @param {String} title
+     */
+    </span><span class="jsdoc-var">setTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.region</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.region.updatePanelTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns true is this panel was configured to be closable
+     * @return {Boolean} 
+     */
+    </span><span class="jsdoc-var">isClosable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.closable</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">beforeSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.clip</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.resizeEl.clip</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">afterSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.unclip</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.resizeEl.unclip</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     *   Force a content refresh from the URL specified in the {@link #setUrl} method.
+     *   Will fail silently if the {@link #setUrl} method has not been called.
+     *   This does not activate the panel, just updates its content.
+     */
+    </span><span class="jsdoc-var">refresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+           </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">();
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Destroys this panel
+     */
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;span&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">tempEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">tempEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    },
+    
+      </span><span class="jsdoc-comment">/**
+     * Adds a xtype elements to the panel - currently only supports Forms.
+     * &lt;pre&gt;&lt;code&gt;
+
+layout.addxtype({
+       xtype : 'Form',
+       items: [ .... ]
+   }
+);
+
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    
+    </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">cfg</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-comment">// add form..
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cfg.xtype.match</span><span class="jsdoc-syntax">(/^Form$/)) {
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new  </span><span class="jsdoc-var">Roo.form.Form</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
+        
+        
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.form.allItems.length</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">this.form.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.form</span><span class="jsdoc-syntax">;
+        
+    }
+});
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.GridPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new GridPanel.
+ * @param {Roo.grid.Grid} grid The grid for this panel
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ */
+</span><span class="jsdoc-var">Roo.GridPanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">grid</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    
+  
+    </span><span class="jsdoc-var">this.wrapper </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// wrapper for IE7 strict &amp; safari scroll issue
+        </span><span class="jsdoc-syntax">{</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-grid-wrapper x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        
+    </span><span class="jsdoc-var">this.wrapper.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">grid.getGridEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+    
+    </span><span class="jsdoc-var">Roo.GridPanel.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.wrapper</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toolbar</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.toolbar.el.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrapper.dom.firstChild</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-comment">// xtype created footer. - not sure if will work as we normally have to render first..
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.footer.el </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.footer.xtype</span><span class="jsdoc-syntax">) {
+        
+        </span><span class="jsdoc-var">this.footer.container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.grid.getView</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getFooterPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.footer.dataSource </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.grid.dataSource</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">);
+        
+    }
+    
+    </span><span class="jsdoc-var">grid.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// turn off autosizing
+    </span><span class="jsdoc-var">grid.autoHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">grid.autoWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">grid</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.grid.getGridEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.replaceClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-component-panel&quot;</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.GridPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">getId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.grid.id</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the grid for this panel
+     * @return {Roo.grid.Grid} 
+     */
+    </span><span class="jsdoc-var">getGrid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.grid</span><span class="jsdoc-syntax">;    
+    },
+    
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.ignoreResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.grid</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustForComponents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">grid.getGridEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">grid.autoSize</span><span class="jsdoc-syntax">();
+        }
+    },
+    
+    </span><span class="jsdoc-var">beforeSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.grid.getView</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.scroller.clip</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">afterSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.grid.getView</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.scroller.unclip</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.grid.destroy</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.grid</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">Roo.GridPanel.superclass.destroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); 
+    }
+});
+
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.NestedLayoutPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new NestedLayoutPanel.
+ * 
+ * 
+ * @param {Roo.BorderLayout} layout The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ */
+</span><span class="jsdoc-var">Roo.NestedLayoutPanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
+{
+    </span><span class="jsdoc-comment">// construct with only one argument..
+    /* FIXME - implement nicer consturctors
+    if (layout.layout) {
+        config = layout;
+        layout = config.layout;
+        delete config.layout;
+    }
+    if (layout.xtype &amp;&amp; !layout.getEl) {
+        // then layout needs constructing..
+        layout = Roo.factory(layout, Roo);
+    }
+    */
+    
+    </span><span class="jsdoc-var">Roo.NestedLayoutPanel.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">layout.getEl</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    
+    </span><span class="jsdoc-var">layout.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// turn off autosizing
+    </span><span class="jsdoc-var">this.layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.layout.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-nested-layout&quot;</span><span class="jsdoc-syntax">);
+    
+    
+    
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.NestedLayoutPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">, {
+
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.ignoreResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustForComponents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.layout.getEl</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">touch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.offsetWidth</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-comment">// ie requires a double layout on the first pass
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.initialized</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.initialized </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+    
+    </span><span class="jsdoc-comment">// activate all subpanels if not currently active..
+    
+    </span><span class="jsdoc-var">setActiveState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">active</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">active</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">active</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;deactivate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">// not sure if this should happen before or after..
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// should not happen..
+        </span><span class="jsdoc-syntax">}
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">reg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">this.layout.regions</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">reg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.layout.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">reg.getActivePanel</span><span class="jsdoc-syntax">()) {
+                </span><span class="jsdoc-comment">//reg.showPanel(reg.getActivePanel()); // force it to activate.. 
+                </span><span class="jsdoc-var">reg.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">reg.getActivePanel</span><span class="jsdoc-syntax">());
+                </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">reg.panels.length</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">reg.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">reg.getPanel</span><span class="jsdoc-syntax">(0));
+        }
+        
+        
+        
+        
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the nested BorderLayout for this panel
+     * @return {Roo.BorderLayout} 
+     */
+    </span><span class="jsdoc-var">getLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">;
+    },
+    
+     </span><span class="jsdoc-comment">/**
+     * Adds a xtype elements to the layout of the nested panel
+     * &lt;pre&gt;&lt;code&gt;
+
+panel.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+panel.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    </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">cfg</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.layout.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
+    
+    }
+});
+
+</span><span class="jsdoc-var">Roo.ScrollPanel </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
+    </span><span class="jsdoc-var">config.fitToFrame </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">Roo.ScrollPanel.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">);
+    
+    </span><span class="jsdoc-var">this.el.dom.style.overflow </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-scroller x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-inactive-content&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousewheel&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onWheel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">up </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-scroller-up&quot;</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">}, </span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-scroller-down&quot;</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">});
+    </span><span class="jsdoc-var">up.unselectable</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-var">down.unselectable</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">up.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.scrollUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">down.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.scrollDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">up.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-scroller-btn-over&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">down.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-scroller-btn-over&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">up.addClassOnClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-scroller-btn-click&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">down.addClassOnClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-scroller-btn-click&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.adjustments </span><span class="jsdoc-syntax">= [0, -(</span><span class="jsdoc-var">up.getHeight</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">down.getHeight</span><span class="jsdoc-syntax">())];
+
+    </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">this.up </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">up</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">this.down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">down</span><span class="jsdoc-syntax">;
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.ScrollPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-var">increment </span><span class="jsdoc-syntax">: 100,
+    </span><span class="jsdoc-var">wheelIncrement </span><span class="jsdoc-syntax">: 5,
+    </span><span class="jsdoc-var">scrollUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.resizeEl.scroll</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;up&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.increment</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.afterScroll</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">});
+    },
+
+    </span><span class="jsdoc-var">scrollDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.resizeEl.scroll</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;down&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.increment</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.afterScroll</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">});
+    },
+
+    </span><span class="jsdoc-var">afterScroll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.scrollTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.scrollHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.clientHeight</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.up</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== 0 ? </span><span class="jsdoc-string">&quot;addClass&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;removeClass&quot;</span><span class="jsdoc-syntax">](</span><span class="jsdoc-string">&quot;x-scroller-btn-disabled&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.down</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;addClass&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;removeClass&quot;</span><span class="jsdoc-syntax">](</span><span class="jsdoc-string">&quot;x-scroller-btn-disabled&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.ScrollPanel.superclass.setSize.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.afterScroll</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">onWheel </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getWheelDelta</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.resizeEl.dom.scrollTop </span><span class="jsdoc-syntax">-= (</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">this.wheelIncrement</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.afterScroll</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">setContent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.resizeEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">);
+    }
+
+});
+
+
+
+
+
+
+
+
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.TreePanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new TreePanel.
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
+ */
+</span><span class="jsdoc-var">Roo.TreePanel </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">){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.el</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tree </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.tree</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.tree</span><span class="jsdoc-syntax">; 
+    </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.el</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// hopefull!
+    </span><span class="jsdoc-var">Roo.TreePanel.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">treeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createChild</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">this.tree </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.tree.TreePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">treeEl </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">//console.log(tree);
+    </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tree.rendered</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-comment">//console.log('render tree');
+        </span><span class="jsdoc-var">this.tree.render</span><span class="jsdoc-syntax">();
+    });
+    
+    </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.tree.innerCt.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.tree.innerCt.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.tree.innerCt.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'overflow-y'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">);
+    });
+
+        
+    
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.TreePanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">);
+
+
+
+
+
+
+
+
+
+
+
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_DDView.js.html b/docs/symbols/src/Roo_DDView.js.html
new file mode 100644 (file)
index 0000000..1988869
--- /dev/null
@@ -0,0 +1,418 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/DDView.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">//&lt;script type=&quot;text/javasscript&quot;&gt;
+
+/**
+ * @class Roo.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.&lt;br&gt;
+ * &lt;p&gt;
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.&lt;br&gt;
+ * &lt;p&gt;
+ * The following extra CSS rules are needed to provide insertion point highlighting:&lt;pre&gt;&lt;code&gt;
+.x-view-drag-insert-above {
+       border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+       border-bottom:1px dotted #3366cc;
+}
+&lt;/code&gt;&lt;/pre&gt;
+ * 
+ */
+</span><span class="jsdoc-var">Roo.DDView </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tpl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-var">Roo.DDView.superclass.constructor.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;outline&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;0px none&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.unselectable</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragGroup</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">this.setDraggable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragGroup.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;,&quot;</span><span class="jsdoc-syntax">));
+    }
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropGroup</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">this.setDroppable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropGroup.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;,&quot;</span><span class="jsdoc-syntax">));
+    }
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.deletable</span><span class="jsdoc-syntax">) {
+       </span><span class="jsdoc-var">this.setDeletable</span><span class="jsdoc-syntax">();
+    }
+    </span><span class="jsdoc-var">this.isDirtyFlag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+       </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+               </span><span class="jsdoc-string">&quot;drop&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+       </span><span class="jsdoc-syntax">});
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.DDView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.View</span><span class="jsdoc-syntax">, {
+</span><span class="jsdoc-comment">/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/**    @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/**    @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/**    @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
+
+       </span><span class="jsdoc-var">isFormField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+       </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
+       
+       </span><span class="jsdoc-var">clearInvalid</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.form.Field.prototype.clearInvalid</span><span class="jsdoc-syntax">,
+
+       </span><span class="jsdoc-var">validate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+       },
+       
+       </span><span class="jsdoc-var">destroy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-var">this.getEl.removeAllListeners</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.remove</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragZone</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragZone.destroy</span><span class="jsdoc-syntax">) {
+                               </span><span class="jsdoc-var">this.dragZone.destroy</span><span class="jsdoc-syntax">();
+                       }
+               }
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropZone</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropZone.destroy</span><span class="jsdoc-syntax">) {
+                               </span><span class="jsdoc-var">this.dropZone.destroy</span><span class="jsdoc-syntax">();
+                       }
+               }
+       },
+
+</span><span class="jsdoc-comment">/** Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+       </span><span class="jsdoc-var">getName</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
+       },
+
+</span><span class="jsdoc-comment">/** Loads the View from a JSON string representing the Records to put into the Store. */
+       </span><span class="jsdoc-var">setValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;DDView.setValue(). DDView must be constructed with a valid Store&quot;</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= {};
+               </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.store.reader.meta.root</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">? []</span><span class="jsdoc-var">.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) : [];
+               </span><span class="jsdoc-var">this.store.proxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.MemoryProxy</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-var">this.store.load</span><span class="jsdoc-syntax">();
+       },
+
+</span><span class="jsdoc-comment">/** @return {String} a parenthesised list of the ids of the Records in the View. */
+       </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'('</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-var">this.store.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">rec.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">','</span><span class="jsdoc-syntax">;
+               });
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result.substr</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">result.length </span><span class="jsdoc-syntax">- 1) + </span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">;
+       },
+       
+       </span><span class="jsdoc-var">getIds</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</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">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.getCount</span><span class="jsdoc-syntax">());
+               </span><span class="jsdoc-var">this.store.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++] = </span><span class="jsdoc-var">rec.id</span><span class="jsdoc-syntax">;
+               });
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
+       },
+       
+       </span><span class="jsdoc-var">isDirty</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.isDirtyFlag</span><span class="jsdoc-syntax">;
+       },
+
+</span><span class="jsdoc-comment">/**
+ *     Part of the Roo.dd.DropZone interface. If no target node is found, the
+ *     whole Element becomes the target, and this causes the drop gesture to append.
+ */
+    </span><span class="jsdoc-var">getTargetFromEvent </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">) {
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) &amp;&amp; (</span><span class="jsdoc-var">target.parentNode </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">)) {
+               </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.parentNode</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.lastChild </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">;
+    },
+
+</span><span class="jsdoc-comment">/**
+ *     Create the drag data which consists of an object which has the property &quot;ddel&quot; as
+ *     the drag proxy element. 
+ */
+    </span><span class="jsdoc-var">getDragData </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">) {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findItemFromChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">());
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">this.handleSelection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selNodes </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getSelectedNodes</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragData </span><span class="jsdoc-syntax">= {
+                </span><span class="jsdoc-var">source</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">copy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.copy </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-var">this.allowCopy </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-var">nodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">selNodes</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">records</span><span class="jsdoc-syntax">: []
+                       };
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selectedIndices </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getSelectedIndexes</span><span class="jsdoc-syntax">();
+                       </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">selectedIndices.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                               </span><span class="jsdoc-var">dragData.records.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectedIndices</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]));
+                       }
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selNodes.length </span><span class="jsdoc-syntax">== 1) {
+                               </span><span class="jsdoc-var">dragData.ddel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.cloneNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);  </span><span class="jsdoc-comment">// the div element
+                       </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// create the multi element drag &quot;ghost&quot;
+                               </span><span class="jsdoc-var">div.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'multi-proxy'</span><span class="jsdoc-syntax">;
+                               </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">selNodes.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                                       </span><span class="jsdoc-var">div.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.cloneNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+                               }
+                               </span><span class="jsdoc-var">dragData.ddel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">;
+                       }
+            </span><span class="jsdoc-comment">//console.log(dragData)
+            //console.log(dragData.ddel.innerHTML)
+                       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dragData</span><span class="jsdoc-syntax">;
+               }
+        </span><span class="jsdoc-comment">//console.log('nodragData')
+               </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+    },
+    
+</span><span class="jsdoc-comment">/** Specify to which ddGroup items in this DDView may be dragged. */
+    </span><span class="jsdoc-var">setDraggable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">) {
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.setDraggable</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+       }
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragZone</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">this.dragZone.addToGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">);
+       } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                       </span><span class="jsdoc-var">this.dragZone </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DragZone</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">(), {
+                               </span><span class="jsdoc-var">containerScroll</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                               </span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ddGroup 
+
+                       </span><span class="jsdoc-syntax">});
+</span><span class="jsdoc-comment">//                  Draggability implies selection. DragZone's mousedown selects the element.
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.multiSelect</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-var">this.singleSelect </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">; }
+
+</span><span class="jsdoc-comment">//                  Wire the DragZone's handlers up to methods in *this*
+                       </span><span class="jsdoc-var">this.dragZone.getDragData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragData.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               }
+    },
+
+</span><span class="jsdoc-comment">/** Specify from which ddGroup this DDView accepts drops. */
+    </span><span class="jsdoc-var">setDroppable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">) {
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.setDroppable</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+       }
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropZone</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">this.dropZone.addToGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">);
+       } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                       </span><span class="jsdoc-var">this.dropZone </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DropZone</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">(), {
+                               </span><span class="jsdoc-var">containerScroll</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                               </span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ddGroup
+                       </span><span class="jsdoc-syntax">});
+
+</span><span class="jsdoc-comment">//                  Wire the DropZone's handlers up to methods in *this*
+                       </span><span class="jsdoc-var">this.dropZone.getTargetFromEvent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getTargetFromEvent.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">this.dropZone.onNodeEnter </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.onNodeEnter.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">this.dropZone.onNodeOver </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.onNodeOver.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">this.dropZone.onNodeOut </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.onNodeOut.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">this.dropZone.onNodeDrop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.onNodeDrop.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               }
+    },
+
+</span><span class="jsdoc-comment">/** Decide whether to drop above or below a View node. */
+    </span><span class="jsdoc-var">getDropPoint </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">, </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">){
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;above&quot;</span><span class="jsdoc-syntax">; }
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">n.offsetHeight</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) / 2;
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Event.getPageY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;above&quot;</span><span class="jsdoc-syntax">;
+               }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;below&quot;</span><span class="jsdoc-syntax">;
+               }
+    },
+
+    </span><span class="jsdoc-var">onNodeEnter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">onNodeOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDropPoint</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-comment">// set the insert point style on the target node
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragElClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targetElClass</span><span class="jsdoc-syntax">;
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;above&quot;</span><span class="jsdoc-syntax">){
+                               </span><span class="jsdoc-var">dragElClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.previousSibling </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;x-tree-drop-ok-between&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-tree-drop-ok-above&quot;</span><span class="jsdoc-syntax">;
+                               </span><span class="jsdoc-var">targetElClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-view-drag-insert-above&quot;</span><span class="jsdoc-syntax">;
+                       } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                               </span><span class="jsdoc-var">dragElClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;x-tree-drop-ok-between&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-tree-drop-ok-below&quot;</span><span class="jsdoc-syntax">;
+                               </span><span class="jsdoc-var">targetElClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-view-drag-insert-below&quot;</span><span class="jsdoc-syntax">;
+                       }
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastInsertClass </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">targetElClass</span><span class="jsdoc-syntax">){
+                               </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replaceClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastInsertClass</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">targetElClass</span><span class="jsdoc-syntax">);
+                               </span><span class="jsdoc-var">this.lastInsertClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">targetElClass</span><span class="jsdoc-syntax">;
+                       }
+               }
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dragElClass</span><span class="jsdoc-syntax">;
+       },
+
+    </span><span class="jsdoc-var">onNodeOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">this.removeDropIndicators</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">onNodeDrop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">){
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;drop&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+       }
+       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDropPoint</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">insertAt </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.nodes.length </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">n.nodeIndex</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;below&quot;</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-var">insertAt</span><span class="jsdoc-syntax">++; }
+               </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">data.records.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">data.records</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.store.getById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.id</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dup </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.dragZone</span><span class="jsdoc-syntax">)) {
+                               </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dup</span><span class="jsdoc-syntax">)))</span><span class="jsdoc-var">.frame</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;red&quot;</span><span class="jsdoc-syntax">, 1);
+                       } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data.copy</span><span class="jsdoc-syntax">) {
+                                       </span><span class="jsdoc-var">this.store.insert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">insertAt</span><span class="jsdoc-syntax">++, </span><span class="jsdoc-var">r.copy</span><span class="jsdoc-syntax">());
+                               } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                                       </span><span class="jsdoc-var">data.source.isDirtyFlag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                                       </span><span class="jsdoc-var">r.store.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
+                                       </span><span class="jsdoc-var">this.store.insert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">insertAt</span><span class="jsdoc-syntax">++, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
+                               }
+                               </span><span class="jsdoc-var">this.isDirtyFlag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                       }
+               }
+               </span><span class="jsdoc-var">this.dragZone.cachedTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">removeDropIndicators </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+                       </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">([
+                               </span><span class="jsdoc-string">&quot;x-view-drag-insert-above&quot;</span><span class="jsdoc-syntax">,
+                               </span><span class="jsdoc-string">&quot;x-view-drag-insert-below&quot;</span><span class="jsdoc-syntax">]);
+                       </span><span class="jsdoc-var">this.lastInsertClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;_noclass&quot;</span><span class="jsdoc-syntax">;
+               }
+    },
+
+</span><span class="jsdoc-comment">/**
+ *     Utility method. Add a delete option to the DDView's context menu.
+ *     @param {String} imageUrl The URL of the &quot;delete&quot; icon image.
+ */
+       </span><span class="jsdoc-var">setDeletable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">imageUrl</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.singleSelect </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.multiSelect</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">this.singleSelect </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getContextMenu</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-var">this.contextMenu.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;itemclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.id</span><span class="jsdoc-syntax">) {
+                               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;delete&quot;</span><span class="jsdoc-syntax">:
+                                       </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSelectedIndexes</span><span class="jsdoc-syntax">());
+                                       </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                       }
+               }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-var">this.contextMenu.add</span><span class="jsdoc-syntax">({
+                       </span><span class="jsdoc-var">icon</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">imageUrl</span><span class="jsdoc-syntax">,
+                       </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;delete&quot;</span><span class="jsdoc-syntax">,
+                       </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Delete'
+               </span><span class="jsdoc-syntax">});
+       },
+       
+</span><span class="jsdoc-comment">/** Return the context menu for this DDView. */
+       </span><span class="jsdoc-var">getContextMenu</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.contextMenu</span><span class="jsdoc-syntax">) {
+</span><span class="jsdoc-comment">//                  Create the View's context menu
+                       </span><span class="jsdoc-var">this.contextMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.Menu</span><span class="jsdoc-syntax">({
+                               </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;-contextmenu&quot;
+                       </span><span class="jsdoc-syntax">});
+                       </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;contextmenu&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showContextMenu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               }
+               </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.contextMenu</span><span class="jsdoc-syntax">;
+       },
+       
+       </span><span class="jsdoc-var">disableContextMenu</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.contextMenu</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;contextmenu&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showContextMenu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+               }
+       },
+
+       </span><span class="jsdoc-var">showContextMenu</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">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findItemFromChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">());
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+                       </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">this.multiSelect </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">this.contextMenu.showAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getXY</span><span class="jsdoc-syntax">());
+           }
+    },
+
+</span><span class="jsdoc-comment">/**
+ *     Remove {@link Roo.data.Record}s at the specified indices.
+ *     @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+    </span><span class="jsdoc-var">remove</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectedIndices</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">selectedIndices </span><span class="jsdoc-syntax">= []</span><span class="jsdoc-var">.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectedIndices</span><span class="jsdoc-syntax">);
+               </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">selectedIndices.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rec </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.store.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectedIndices</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+                       </span><span class="jsdoc-var">this.store.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">);
+               }
+    },
+
+</span><span class="jsdoc-comment">/**
+ *     Double click fires the event, but also, if this is draggable, and there is only one other
+ *     related DropZone, it transfers the selected node.
+ */
+    </span><span class="jsdoc-var">onDblClick </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findItemFromChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;dblclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragGroup</span><span class="jsdoc-syntax">) {
+                   </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">targets </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dd.DragDropMgr.getRelated</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragZone</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                   </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targets.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropZone</span><span class="jsdoc-syntax">) &gt; -1) {
+                           </span><span class="jsdoc-var">targets.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropZone</span><span class="jsdoc-syntax">);
+                               }
+                   </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targets.length </span><span class="jsdoc-syntax">== 1) {
+                                       </span><span class="jsdoc-var">this.dragZone.cachedTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targets</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">());
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">targets</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.onNodeDrop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">, {
+                               </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">,
+                               </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">- 1]
+                       }, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getDragData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">));
+                   }
+               }
+        }
+    },
+    
+    </span><span class="jsdoc-var">handleSelection</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">) {
+               </span><span class="jsdoc-var">this.dragZone.cachedTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findItemFromChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">) {
+               </span><span class="jsdoc-var">this.clearSelections</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">this.multiSelect </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.singleSelect</span><span class="jsdoc-syntax">)){
+                       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiSelect </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.shiftKey </span><span class="jsdoc-syntax">&amp;&amp; (!</span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">this.lastSelection</span><span class="jsdoc-syntax">){
+                               </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getNodes</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastSelection</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">item.nodeIndex</span><span class="jsdoc-syntax">), </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                       }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isSelected</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">)) &amp;&amp; </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">){
+                               </span><span class="jsdoc-var">this.unselect</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
+                       } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                               </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.multiSelect </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">);
+                               </span><span class="jsdoc-var">this.lastSelection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
+                       }
+               }
+    },
+
+    </span><span class="jsdoc-var">onItemClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                       </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">unselect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nodeInfo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">suppressEvent</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nodeInfo</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.isSelected</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)){
+                       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeselect&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.selections</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                               </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectedClass</span><span class="jsdoc-syntax">);
+                               </span><span class="jsdoc-var">this.selections.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
+                               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">suppressEvent</span><span class="jsdoc-syntax">){
+                                       </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;selectionchange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.selections</span><span class="jsdoc-syntax">);
+                               }
+                       }
+               }
+    }
+});
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_DatePicker.js.html b/docs/symbols/src/Roo_DatePicker.js.html
new file mode 100644 (file)
index 0000000..ebbbfbe
--- /dev/null
@@ -0,0 +1,638 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/DatePicker.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.DatePicker
+ * @extends Roo.Component
+ * Simple date picker class.
+ * @constructor
+ * Create a new DatePicker
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.DatePicker </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">){
+    </span><span class="jsdoc-var">Roo.DatePicker.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">);
+
+    </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config.value </span><span class="jsdoc-syntax">?
+                 </span><span class="jsdoc-var">config.value.clearTime</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.clearTime</span><span class="jsdoc-syntax">();
+
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+            * @event select
+            * Fires when a date is selected
+            * @param {DatePicker} this
+            * @param {Date} date The selected date
+            */
+        </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-comment">// build the disabledDatesRE
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabledDatesRE </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.disabledDates</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disabledDates</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;(?:&quot;</span><span class="jsdoc-syntax">;
+        </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">dd.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">dd.length</span><span class="jsdoc-syntax">-1) </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;|&quot;</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.disabledDatesRE </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">RegExp</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;)&quot;</span><span class="jsdoc-syntax">);
+    }
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.DatePicker</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} todayText
+     * The text to display on the button that selects the current date (defaults to &quot;Today&quot;)
+     */
+    </span><span class="jsdoc-var">todayText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Today&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} okText
+     * The text to display on the ok button
+     */
+    </span><span class="jsdoc-var">okText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;OK&amp;#160;&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// &amp;#160; to give the user extra clicking room
+    /**
+     * @cfg {String} cancelText
+     * The text to display on the cancel button
+     */
+    </span><span class="jsdoc-var">cancelText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Cancel&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} todayTip
+     * The tooltip to display for the button that selects the current date (defaults to &quot;{current date} (Spacebar)&quot;)
+     */
+    </span><span class="jsdoc-var">todayTip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;{0} (Spacebar)&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Date} minDate
+     * Minimum allowable date (JavaScript date object, defaults to null)
+     */
+    </span><span class="jsdoc-var">minDate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Date} maxDate
+     * Maximum allowable date (JavaScript date object, defaults to null)
+     */
+    </span><span class="jsdoc-var">maxDate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} minText
+     * The error text to display if the minDate validation fails (defaults to &quot;This date is before the minimum date&quot;)
+     */
+    </span><span class="jsdoc-var">minText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;This date is before the minimum date&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} maxText
+     * The error text to display if the maxDate validation fails (defaults to &quot;This date is after the maximum date&quot;)
+     */
+    </span><span class="jsdoc-var">maxText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;This date is after the maximum date&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} format
+     * The default date format string which can be overriden for localization support.  The format must be
+     * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+     */
+    </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;m/d/y&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Array} disabledDays
+     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+     */
+    </span><span class="jsdoc-var">disabledDays </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} disabledDaysText
+     * The tooltip to display when the date falls on a disabled day (defaults to &quot;&quot;)
+     */
+    </span><span class="jsdoc-var">disabledDaysText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {RegExp} disabledDatesRE
+     * JavaScript regular expression used to disable a pattern of dates (defaults to null)
+     */
+    </span><span class="jsdoc-var">disabledDatesRE </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to &quot;&quot;)
+     */
+    </span><span class="jsdoc-var">disabledDatesText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} constrainToViewport
+     * True to constrain the date picker to the viewport (defaults to true)
+     */
+    </span><span class="jsdoc-var">constrainToViewport </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Array} monthNames
+     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
+     */
+    </span><span class="jsdoc-var">monthNames </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Date.monthNames</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Array} dayNames
+     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
+     */
+    </span><span class="jsdoc-var">dayNames </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Date.dayNames</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} nextText
+     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
+     */
+    </span><span class="jsdoc-var">nextText</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Next Month (Control+Right)'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} prevText
+     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
+     */
+    </span><span class="jsdoc-var">prevText</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Previous Month (Control+Left)'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} monthYearText
+     * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
+     */
+    </span><span class="jsdoc-var">monthYearText</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Choose a month (Control+Up/Down to move years)'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Number} startDay
+     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
+     */
+    </span><span class="jsdoc-var">startDay </span><span class="jsdoc-syntax">: 0,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Bool} showClear
+     * Show a clear button (usefull for date form elements that can be blank.)
+     */
+    
+    </span><span class="jsdoc-var">showClear</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-comment">/**
+     * Sets the value of the date field
+     * @param {Date} value The date to set
+     */
+    </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">old </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value.clearTime</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Gets the current selected value of the date field
+     * @return {Date} The selected date
+     */
+    </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </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">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= [
+             </span><span class="jsdoc-string">'&lt;table cellspacing=&quot;0&quot;&gt;'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'&lt;tr&gt;&lt;td class=&quot;x-date-left&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.prevText </span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'&quot;&gt;&amp;#160;&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot;x-date-middle&quot; align=&quot;center&quot;&gt;&lt;/td&gt;&lt;td class=&quot;x-date-right&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.nextText </span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'&quot;&gt;&amp;#160;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'&lt;tr&gt;&lt;td colspan=&quot;3&quot;&gt;&lt;table class=&quot;x-date-inner&quot; cellspacing=&quot;0&quot;&gt;&lt;thead&gt;&lt;tr&gt;'</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dayNames</span><span class="jsdoc-syntax">;
+        </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; 7; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startDay</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">&gt; 6){
+                </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">-7;
+            }
+            </span><span class="jsdoc-var">m.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&lt;th&gt;&lt;span&gt;&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.substr</span><span class="jsdoc-syntax">(0,1), </span><span class="jsdoc-string">&quot;&lt;/span&gt;&lt;/th&gt;&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">&quot;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&quot;</span><span class="jsdoc-syntax">;
+        </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; 42; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">% 7 == 0 &amp;&amp; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">!= 0){
+                </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">&quot;&lt;/tr&gt;&lt;tr&gt;&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'&lt;td&gt;&lt;a href=&quot;#&quot; hidefocus=&quot;on&quot; class=&quot;x-date-date&quot; tabIndex=&quot;1&quot;&gt;&lt;em&gt;&lt;span&gt;&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;/td&gt;'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;'</span><span class="jsdoc-syntax">+
+            </span><span class="jsdoc-string">'&lt;td colspan=&quot;3&quot; class=&quot;x-date-bottom&quot; align=&quot;center&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;div class=&quot;x-date-mp&quot;&gt;&lt;/div&gt;'</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-date-picker&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">container.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.eventEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.ClickRepeater</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td.x-date-left a&quot;</span><span class="jsdoc-syntax">), {
+            </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.showPrevMonth</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">stopDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.ClickRepeater</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td.x-date-right a&quot;</span><span class="jsdoc-syntax">), {
+            </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.showNextMonth</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">stopDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">this.eventEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousewheel&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseWheel</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.monthPicker </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.down</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div.x-date-mp'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.monthPicker.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">kn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.KeyNav</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.eventEl</span><span class="jsdoc-syntax">, {
+            </span><span class="jsdoc-string">&quot;left&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">){
+                </span><span class="jsdoc-var">e.ctrlKey </span><span class="jsdoc-syntax">?
+                    </span><span class="jsdoc-var">this.showPrevMonth</span><span class="jsdoc-syntax">() :
+                    </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">, -1));
+            },
+
+            </span><span class="jsdoc-string">&quot;right&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">){
+                </span><span class="jsdoc-var">e.ctrlKey </span><span class="jsdoc-syntax">?
+                    </span><span class="jsdoc-var">this.showNextMonth</span><span class="jsdoc-syntax">() :
+                    </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">, 1));
+            },
+
+            </span><span class="jsdoc-string">&quot;up&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">){
+                </span><span class="jsdoc-var">e.ctrlKey </span><span class="jsdoc-syntax">?
+                    </span><span class="jsdoc-var">this.showNextYear</span><span class="jsdoc-syntax">() :
+                    </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">, -7));
+            },
+
+            </span><span class="jsdoc-string">&quot;down&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">){
+                </span><span class="jsdoc-var">e.ctrlKey </span><span class="jsdoc-syntax">?
+                    </span><span class="jsdoc-var">this.showPrevYear</span><span class="jsdoc-syntax">() :
+                    </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;d&quot;</span><span class="jsdoc-syntax">, 7));
+            },
+
+            </span><span class="jsdoc-string">&quot;pageUp&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">){
+                </span><span class="jsdoc-var">this.showNextMonth</span><span class="jsdoc-syntax">();
+            },
+
+            </span><span class="jsdoc-string">&quot;pageDown&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">){
+                </span><span class="jsdoc-var">this.showPrevMonth</span><span class="jsdoc-syntax">();
+            },
+
+            </span><span class="jsdoc-string">&quot;enter&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">){
+                </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">this.eventEl.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.handleDateClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a.x-date-date&quot;</span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">this.eventEl.addKeyListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.EventObject.SPACE</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.selectToday</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.el.unselectable</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-var">this.cells </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;table.x-date-inner tbody td&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.textNodes </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.query</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;table.x-date-inner tbody span&quot;</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.mbtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Button</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td.x-date-middle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), {
+            </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.monthYearText
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">this.mbtn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showMonthPicker</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.mbtn.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mbtn.menuClassTarget</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-with-menu&quot;</span><span class="jsdoc-syntax">);
+
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">today </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.dateFormat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.format</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">baseTb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td.x-date-bottom&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">baseTb.add</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.todayText</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">today</span><span class="jsdoc-syntax">),
+            </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.todayTip</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">today</span><span class="jsdoc-syntax">),
+            </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.selectToday</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
+        </span><span class="jsdoc-syntax">});
+        
+        </span><span class="jsdoc-comment">//var todayBtn = new Roo.Button(this.el.child(&quot;td.x-date-bottom&quot;, true), {
+            
+        //});
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showClear</span><span class="jsdoc-syntax">) {
+            
+            </span><span class="jsdoc-var">baseTb.add</span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Fill</span><span class="jsdoc-syntax">());
+            </span><span class="jsdoc-var">baseTb.add</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&amp;#160;'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon x-btn-clear'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+                    </span><span class="jsdoc-comment">//this.value = '';
+                    </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
+                },
+                </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
+            </span><span class="jsdoc-syntax">});
+        }
+        
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.repaint</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">createMonthPicker </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.monthPicker.dom.firstChild</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">buf </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-string">'&lt;table border=&quot;0&quot; cellspacing=&quot;0&quot;&gt;'</span><span class="jsdoc-syntax">];
+            </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; 6; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">buf.push</span><span class="jsdoc-syntax">(
+                    </span><span class="jsdoc-string">'&lt;tr&gt;&lt;td class=&quot;x-date-mp-month&quot;&gt;&lt;a href=&quot;#&quot;&gt;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.monthNames</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.substr</span><span class="jsdoc-syntax">(0, 3), </span><span class="jsdoc-string">'&lt;/a&gt;&lt;/td&gt;'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-string">'&lt;td class=&quot;x-date-mp-month x-date-mp-sep&quot;&gt;&lt;a href=&quot;#&quot;&gt;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.monthNames</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+6]</span><span class="jsdoc-var">.substr</span><span class="jsdoc-syntax">(0, 3), </span><span class="jsdoc-string">'&lt;/a&gt;&lt;/td&gt;'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">== 0 ?
+                    </span><span class="jsdoc-string">'&lt;td class=&quot;x-date-mp-ybtn&quot; align=&quot;center&quot;&gt;&lt;a class=&quot;x-date-mp-prev&quot;&gt;&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot;x-date-mp-ybtn&quot; align=&quot;center&quot;&gt;&lt;a class=&quot;x-date-mp-next&quot;&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;' </span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-string">'&lt;td class=&quot;x-date-mp-year&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot;x-date-mp-year&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;'
+                </span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">buf.push</span><span class="jsdoc-syntax">(
+                </span><span class="jsdoc-string">'&lt;tr class=&quot;x-date-mp-btns&quot;&gt;&lt;td colspan=&quot;4&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;x-date-mp-ok&quot;&gt;'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">this.okText</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-string">'&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;x-date-mp-cancel&quot;&gt;'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">this.cancelText</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-string">'&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'&lt;/table&gt;'
+            </span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.monthPicker.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">buf.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">this.monthPicker.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMonthClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.monthPicker.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dblclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMonthDblClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">this.mpMonths </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.monthPicker.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td.x-date-mp-month'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.mpYears </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.monthPicker.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td.x-date-mp-year'</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">this.mpMonths.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">%2) == 0){
+                    </span><span class="jsdoc-var">m.dom.xmonth </span><span class="jsdoc-syntax">= 5 + </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">m.dom.xmonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">-1) * </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                }
+            });
+        }
+    },
+
+    </span><span class="jsdoc-var">showMonthPicker </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.createMonthPicker</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.monthPicker.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.monthPicker.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.mpSelMonth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.activeDate </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getMonth</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.updateMPMonth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mpSelMonth</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.mpSelYear </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.activeDate </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getFullYear</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.updateMPYear</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mpSelYear</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.monthPicker.slideIn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</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">2});
+    },
+
+    </span><span class="jsdoc-var">updateMPYear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.mpyear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ys </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.mpYears.elements</span><span class="jsdoc-syntax">;
+        </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">= 1; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt;= 10; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ys</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">-1], </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">%2) == 0){
+                </span><span class="jsdoc-var">y2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                </span><span class="jsdoc-var">td.firstChild.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">td.xyear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">y2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">- (5-</span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5));
+                </span><span class="jsdoc-var">td.firstChild.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">td.xyear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.mpYears.item</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">-1)[</span><span class="jsdoc-var">y2 </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.mpSelYear </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'addClass' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'removeClass'</span><span class="jsdoc-syntax">](</span><span class="jsdoc-string">'x-date-mp-sel'</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-var">updateMPMonth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sm</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.mpMonths.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">m.dom.xmonth </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">sm </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'addClass' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'removeClass'</span><span class="jsdoc-syntax">](</span><span class="jsdoc-string">'x-date-mp-sel'</span><span class="jsdoc-syntax">);
+        });
+    },
+
+    </span><span class="jsdoc-var">selectMPMonth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
+        
+    },
+
+    </span><span class="jsdoc-var">onMonthClick </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">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">pn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button.x-date-mp-cancel'</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.hideMonthPicker</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button.x-date-mp-ok'</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mpSelYear</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.mpSelMonth</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-var">this.activeDate </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getDate</span><span class="jsdoc-syntax">()));
+            </span><span class="jsdoc-var">this.hideMonthPicker</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td.x-date-mp-month'</span><span class="jsdoc-syntax">, 2)){
+            </span><span class="jsdoc-var">this.mpMonths.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-date-mp-sel'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">pn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-date-mp-sel'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.mpSelMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pn.dom.xmonth</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td.x-date-mp-year'</span><span class="jsdoc-syntax">, 2)){
+            </span><span class="jsdoc-var">this.mpYears.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-date-mp-sel'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">pn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-date-mp-sel'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.mpSelYear </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pn.dom.xyear</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'a.x-date-mp-prev'</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.updateMPYear</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mpyear</span><span class="jsdoc-syntax">-10);
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'a.x-date-mp-next'</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.updateMPYear</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mpyear</span><span class="jsdoc-syntax">+10);
+        }
+    },
+
+    </span><span class="jsdoc-var">onMonthDblClick </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">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">pn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td.x-date-mp-month'</span><span class="jsdoc-syntax">, 2)){
+            </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mpSelYear</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pn.dom.xmonth</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-var">this.activeDate </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getDate</span><span class="jsdoc-syntax">()));
+            </span><span class="jsdoc-var">this.hideMonthPicker</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td.x-date-mp-year'</span><span class="jsdoc-syntax">, 2)){
+            </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pn.dom.xyear</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.mpSelMonth</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-var">this.activeDate </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getDate</span><span class="jsdoc-syntax">()));
+            </span><span class="jsdoc-var">this.hideMonthPicker</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-var">hideMonthPicker </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">disableAnim</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monthPicker</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">disableAnim </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.monthPicker.hide</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.monthPicker.slideOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</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">2});
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">showPrevMonth </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">){
+        </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mo&quot;</span><span class="jsdoc-syntax">, -1));
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">showNextMonth </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">){
+        </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mo&quot;</span><span class="jsdoc-syntax">, 1));
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">showPrevYear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;y&quot;</span><span class="jsdoc-syntax">, -1));
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">showNextYear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeDate.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;y&quot;</span><span class="jsdoc-syntax">, 1));
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">handleMouseWheel </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">delta </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getWheelDelta</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">delta </span><span class="jsdoc-syntax">&gt; 0){
+            </span><span class="jsdoc-var">this.showPrevMonth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+        } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">delta </span><span class="jsdoc-syntax">&lt; 0){
+            </span><span class="jsdoc-var">this.showNextMonth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">handleDateClick </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">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.dateValue </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.parentNode</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-date-disabled&quot;</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.dateValue</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">selectToday </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.clearTime</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">update </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">date</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.activeDate</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.activeDate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">date</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">vd </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">date.getTime</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">vd.getMonth</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">date.getMonth</span><span class="jsdoc-syntax">() &amp;&amp; </span><span class="jsdoc-var">vd.getFullYear</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">date.getFullYear</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">this.cells.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-date-selected&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.cells.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.dom.firstChild.dateValue </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+                       </span><span class="jsdoc-var">c.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-date-selected&quot;</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                            </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">c.dom.firstChild.focus</span><span class="jsdoc-syntax">();}</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
+                       }, 50);
+                       </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+                   }
+                });
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">days </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">date.getDaysInMonth</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">firstOfMonth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">date.getFirstDateOfMonth</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">startingPos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">firstOfMonth.getDay</span><span class="jsdoc-syntax">()-</span><span class="jsdoc-var">this.startDay</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startingPos </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">this.startDay</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">startingPos </span><span class="jsdoc-syntax">+= 7;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">date.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mo&quot;</span><span class="jsdoc-syntax">, -1);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">prevStart </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pm.getDaysInMonth</span><span class="jsdoc-syntax">()-</span><span class="jsdoc-var">startingPos</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cells </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cells.elements</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">textEls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.textNodes</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">days </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">startingPos</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-comment">// convert everything to numbers so it's fast
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">day </span><span class="jsdoc-syntax">= 86400000;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pm.getFullYear</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">pm.getMonth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">prevStart</span><span class="jsdoc-syntax">))</span><span class="jsdoc-var">.clearTime</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">today </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.clearTime</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">date.clearTime</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">min </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minDate </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.minDate.clearTime</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">Number.NEGATIVE_INFINITY</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">max </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.maxDate </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.maxDate.clearTime</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">Number.POSITIVE_INFINITY</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ddMatch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disabledDatesRE</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ddText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disabledDatesText</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ddays </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disabledDays </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.disabledDays.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ddaysText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disabledDaysText</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.format</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">setCellClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cal</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cell.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d.getTime</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">cell.firstChild.dateValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">today</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">cell.className </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot; x-date-today&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">cell.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cal.todayText</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">cell.className </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot; x-date-selected&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">cell.firstChild.focus</span><span class="jsdoc-syntax">();}</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
+                }, 50);
+            }
+            </span><span class="jsdoc-comment">// disabling
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">min</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">cell.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot; x-date-disabled&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">cell.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cal.minText</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">max</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">cell.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot; x-date-disabled&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">cell.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cal.maxText</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddays</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddays.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.getDay</span><span class="jsdoc-syntax">()) != -1){
+                    </span><span class="jsdoc-var">cell.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ddaysText</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">cell.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot; x-date-disabled&quot;</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddMatch </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fvalue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d.dateFormat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddMatch.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fvalue</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">cell.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ddText.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;%0&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fvalue</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">cell.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot; x-date-disabled&quot;</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-keyword">for</span><span class="jsdoc-syntax">(; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">startingPos</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-var">textEls</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.innerHTML </span><span class="jsdoc-syntax">= (++</span><span class="jsdoc-var">prevStart</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">d.setDate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.getDate</span><span class="jsdoc-syntax">()+1);
+            </span><span class="jsdoc-var">cells</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-date-prevday&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">setCellClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cells</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+        }
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">days</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">intDay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">startingPos </span><span class="jsdoc-syntax">+ 1;
+            </span><span class="jsdoc-var">textEls</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.innerHTML </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">intDay</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">d.setDate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.getDate</span><span class="jsdoc-syntax">()+1);
+            </span><span class="jsdoc-var">cells</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-date-active&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">setCellClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cells</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">extraDays </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; 42; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+             </span><span class="jsdoc-var">textEls</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.innerHTML </span><span class="jsdoc-syntax">= (++</span><span class="jsdoc-var">extraDays</span><span class="jsdoc-syntax">);
+             </span><span class="jsdoc-var">d.setDate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.getDate</span><span class="jsdoc-syntax">()+1);
+             </span><span class="jsdoc-var">cells</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-date-nextday&quot;</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-var">setCellClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cells</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+        }
+
+        </span><span class="jsdoc-var">this.mbtn.setText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monthNames</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">date.getMonth</span><span class="jsdoc-syntax">()] + </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">date.getFullYear</span><span class="jsdoc-syntax">());
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.internalRender</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">main </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.firstChild</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">main.offsetWidth</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">main</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.internalRender </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// opera does not respect the auto grow header center column
+            // then, after it gets a width opera refuses to recalculate
+            // without a second pass
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isOpera </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.secondPass</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">main.rows</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cells</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.style.width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">main.rows</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cells</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.offsetWidth</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">main.rows</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cells</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.offsetWidth</span><span class="jsdoc-syntax">)) + </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.secondPass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.update.defer</span><span class="jsdoc-syntax">(10, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">date</span><span class="jsdoc-syntax">]);
+            }
+        }
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Document.js.html b/docs/symbols/src/Roo_Document.js.html
new file mode 100644 (file)
index 0000000..6341d0f
--- /dev/null
@@ -0,0 +1,342 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Document.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">/*
+ * Original code for Roojs - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * 
+ * This needs some more thought..
+ * 
+ * 
+ * 
+ * @class Roo.XComponent
+ * @extends Roo.data.Observable
+ * 
+ * A delayed Element creator...
+ * 
+ * Mypart.xyx = new Roo.XComponent({
+
+    parent : 'Mypart.xyz', // empty == document.element.!!
+    order : '001',
+    name : 'xxxx'
+    region : 'xxxx'
+    disabled : function() {} 
+     
+    items : [  // technically only one component..
+        {
+            xtype : 'NestedLayoutPanel',
+            // technicall
+        }
+     ]
+ *})
+ * 
+ * 
+ * 
+ */
+</span><span class="jsdoc-var">Roo.XComponent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</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</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({ 
+        </span><span class="jsdoc-comment">/**
+            * @event built
+            * Fires when this the componnt is built
+            * @param {Roo.XComponent} c the component
+            */
+        </span><span class="jsdoc-string">'built' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event buildcomplete
+            * Fires on the top level element when all elements have been built
+            * @param {Roo.XComponent} c the top level component.
+         */
+        </span><span class="jsdoc-string">'buildcomplete' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        
+    });
+
+    </span><span class="jsdoc-var">Roo.XComponent.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.modules </span><span class="jsdoc-syntax">= [];
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// where the layout goes..
+    
+    
+</span><span class="jsdoc-syntax">}
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.XComponent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable </span><span class="jsdoc-syntax">{
+    </span><span class="jsdoc-comment">/**
+     * @property el
+     * The created element (with Roo.factory())
+     * @type {Roo.Layout}
+     */
+    </span><span class="jsdoc-var">el  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-comment">/**
+     * @property el
+     * for BC  - use el in new code
+     * @type {Roo.Layout}
+     */
+    </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-comment">/**
+     * @property layout
+     * for BC  - use el in new code
+     * @type {Roo.Layout}
+     */
+    </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+     </span><span class="jsdoc-comment">/**
+     * @cfg {Function|boolean} disabled
+     * If this module is disabled by some rule, return true from the funtion
+     */
+    </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} parent 
+     * Name of parent element which it get xtype added to..
+     */
+    </span><span class="jsdoc-var">parent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} order
+     * Used to set the order in which elements are created (usefull for multiple tabs)
+     */
+    
+    </span><span class="jsdoc-var">order </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} name
+     * String to display while loading.
+     */
+    </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Array} items
+     * A single item array - the first element is the root of the tree..
+     * It's done this way to stay compatible with the Xtype system...
+     */
+    </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+});
+
+</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.XComponent</span><span class="jsdoc-syntax">, 
+    </span><span class="jsdoc-comment">/**
+     * @property  buildCompleted
+     * True when the builder has completed building the interface.
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">buildCompleted </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+     
+    </span><span class="jsdoc-comment">/**
+     * @property  topModule
+     * the upper most module - uses document.element as it's constructor.
+     * @type Object
+     */
+     
+    </span><span class="jsdoc-var">topModule  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+      
+    </span><span class="jsdoc-comment">/**
+     * @property  modules
+     * array of modules to be created by registration system.
+     * @type Roo.XComponent
+     */
+    
+    </span><span class="jsdoc-var">modules </span><span class="jsdoc-syntax">: [],
+      
+    
+    </span><span class="jsdoc-comment">/**
+     * Register components to be built later.
+     * @param {Object} details about module
+     *
+     * This solves the following issues
+     * - Building is not done on page load, but after an authentication process has occured.
+     * - Interface elements are registered on page load
+     * - Parent Interface elements may not be loaded before child, so this handles that..
+     * 
+     *
+     * example:
+     * 
+     * MyApp.register({
+          order : '000001',
+          module : 'Pman.Tab.projectMgr',
+          region : 'center',
+          parent : 'Pman.layout',
+          disabled : false,  // or use a function..
+        })
+     * 
+     */
+    </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">this.modules.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">);
+         
+    },
+    </span><span class="jsdoc-comment">/**
+     * convert a string to an object..
+     * 
+     */
+    
+    </span><span class="jsdoc-var">toObject </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">)
+    {
+        </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">str</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ar.unshift</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-comment">/** eval:var:o */
+        </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'if (typeof ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' == &quot;undefined&quot;){ o = false;} o = ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">';'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Module not found : &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</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">) {
+            </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">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Module not found : &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">];
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+        
+    }
+    
+    
+    </span><span class="jsdoc-comment">/**
+     * move modules into their correct place in the tree..
+     * 
+     */
+    </span><span class="jsdoc-var">preBuild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">modules </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.modules</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.modules </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">modules </span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">)
+        {
+            </span><span class="jsdoc-var">obj.parent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toObject</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj.parent</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">obj.parent</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">this.topModule </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">obj.parent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">toObject</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj.parent</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">obj.parent.modules</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">obj.parent.modules </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, 
+                    </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o.order </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">}
+                );
+            }
+            
+            </span><span class="jsdoc-var">obj.parent.modules.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">);
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    
+     </span><span class="jsdoc-comment">/**
+     * make a list of modules to build.
+     * @return {Array} list of modules. 
+     */ 
+    
+    </span><span class="jsdoc-var">buildOrder </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cmp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">) {   
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.toUpperCase</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.toUpperCase</span><span class="jsdoc-syntax">() ? 1 : -1;
+        };
+        
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.topModule </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.topModule.modules</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;No top level modules to build&quot;</span><span class="jsdoc-syntax">;
+        }
+       
+        </span><span class="jsdoc-comment">// make a flat list in order of modules to build.
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mods </span><span class="jsdoc-syntax">= [ </span><span class="jsdoc-var">this.topModule </span><span class="jsdoc-syntax">];
+        
+        
+        </span><span class="jsdoc-comment">// add modules to their parents..
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">addMod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">) {
+           </span><span class="jsdoc-comment">// console.log(m.modKey);
+            
+            </span><span class="jsdoc-var">mods.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.module.modules</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">m.module.modules.keySort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'ASC'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">cmp </span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">m.module.modules.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">addMod</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.finalize</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">m.finalize.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.name </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; (clean up) &quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">mods.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.finalize</span><span class="jsdoc-syntax">);
+            }
+            
+        }
+        </span><span class="jsdoc-var">this.topModule.modules.keySort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'ASC'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">cmp </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.topModule.modules.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">addMod</span><span class="jsdoc-syntax">);
+    }
+    
+     </span><span class="jsdoc-comment">/**
+     * Build the registered modules.
+     * @param {Object} parent element.
+     * @param {Function} optional method to call after module has been added.
+     * 
+     */ 
+   
+    </span><span class="jsdoc-var">build </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() 
+    {
+        
+        </span><span class="jsdoc-var">this.preBuild</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mods </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buildOrder</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-comment">//this.allmods = mods;
+        //console.log(mods);
+        //return;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">mods.length</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// should not happen
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;NO modules!!!&quot;</span><span class="jsdoc-syntax">;
+        }
+        
+        
+        
+        </span><span class="jsdoc-comment">// flash it up as modal - so we store the mask!?
+        </span><span class="jsdoc-var">Roo.MessageBox.show</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'loading' </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">Roo.MessageBox.show</span><span class="jsdoc-syntax">({
+           </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Please wait...&quot;</span><span class="jsdoc-syntax">,
+           </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Building Interface...&quot;</span><span class="jsdoc-syntax">,
+           </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:450,
+           </span><span class="jsdoc-var">progress</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+           </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+           </span><span class="jsdoc-var">modal</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
+          
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">total </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">mods.length</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">progressRun </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mods.length</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">Roo.MessageBox.hide</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">_this.topModule.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'buildcomplete'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">_this.topModule</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;    
+            }
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">mods.unshift</span><span class="jsdoc-syntax">();
+            
+            </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">m</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// not sure if this is supported any more..
+                </span><span class="jsdoc-var">m.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">progressRun.defer</span><span class="jsdoc-syntax">(10, </span><span class="jsdoc-var">_this</span><span class="jsdoc-syntax">);
+            } 
+            
+            </span><span class="jsdoc-var">Roo.MessageBox.updateProgress</span><span class="jsdoc-syntax">(
+                (</span><span class="jsdoc-var">total  </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">mods.length</span><span class="jsdoc-syntax">)/</span><span class="jsdoc-var">total</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-string">&quot;Building Interface &quot; </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">total  </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">mods.length</span><span class="jsdoc-syntax">) + 
+                    </span><span class="jsdoc-string">&quot; of &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">total </span><span class="jsdoc-syntax">+ 
+                    (</span><span class="jsdoc-var">m.name </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-string">' - ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.name</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)
+                    );
+            
+         
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.module.disabled</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) ?
+                </span><span class="jsdoc-var">m.module.disabled.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.module.disabled</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">m.module.disabled</span><span class="jsdoc-syntax">;    
+            }
+            
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">disabled</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">progressRun</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">// we do not update the display!
+            </span><span class="jsdoc-syntax">}
+            
+            </span><span class="jsdoc-var">m.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.parent.el.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.items</span><span class="jsdoc-syntax">[0]);
+            </span><span class="jsdoc-var">m.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'built'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">m.panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">m.layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.panel.layout</span><span class="jsdoc-syntax">;    
+             
+            
+        }
+        </span><span class="jsdoc-var">progressRun.defer</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">_this</span><span class="jsdoc-syntax">);
+     
+        
+        
+    }
+     
+   
+    
+    
+});
+ </span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_DomHelper.js.html b/docs/symbols/src/Roo_DomHelper.js.html
new file mode 100644 (file)
index 0000000..92c4809
--- /dev/null
@@ -0,0 +1,439 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/DomHelper.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.DomHelper
+ * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
+ * For more information see &lt;a href=&quot;http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/&quot;&gt;this blog post with examples&lt;/a&gt;.
+ * @singleton
+ */
+</span><span class="jsdoc-var">Roo.DomHelper </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempTableEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">emptyTags </span><span class="jsdoc-syntax">= /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tableRe </span><span class="jsdoc-syntax">= /^table|tbody|tr|td$/i;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xmlns </span><span class="jsdoc-syntax">= {};
+    </span><span class="jsdoc-comment">// build as innerHTML where available
+    /** @ignore */
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createHtml </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&lt;&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">attr </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;tag&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;children&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;cn&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;html&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;style&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;style&quot;</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.call</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' style=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' style=&quot;'</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;:&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">&quot;;&quot;</span><span class="jsdoc-syntax">;
+                        }
+                    }
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' class=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;htmlFor&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' for=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;htmlFor&quot;</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+                }
+            }
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">emptyTags.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;/&gt;&quot;</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&gt;&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.children </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.cn</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-comment">//http://bugs.kde.org/show_bug.cgi?id=71506
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">cn </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.join</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">)){
+                    </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                        </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&lt;/&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;&gt;&quot;</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-comment">// build as dom
+    /** @ignore */
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createDom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parentNode</span><span class="jsdoc-syntax">){
+         
+        </span><span class="jsdoc-comment">// defininition craeted..
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">) {
+               
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.xmlns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">o.xmlns</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.xmlns</span><span class="jsdoc-syntax">;
+            }
+            </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">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">console.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Trying to create namespace element &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;, however no xmlns was sent to builder previously&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">];
+        }
+        
+        
+        </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">o</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">parentNode.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createTextNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">));
+        }
+        </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">':' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">;
+            
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">document.createElementNS</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">) :  </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">useSet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.setAttribute </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// In IE some elements don't have setAttribute
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">attr </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;tag&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;ns&quot; </span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;xmlns&quot; </span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;children&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;cn&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;html&quot; </span><span class="jsdoc-syntax">|| 
+                    </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;style&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                    
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;cls&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">];
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">useSet</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">el.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;cls&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'class' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">]);
+                </span><span class="jsdoc-keyword">else </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">];
+            }
+        }
+        </span><span class="jsdoc-var">Roo.DomHelper.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.style</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.children </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.cn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">//http://bugs.kde.org/show_bug.cgi?id=71506
+             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">cn </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.join</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">)){
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                    </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parentNode</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-var">parentNode.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ieTable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">depth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">tempTableEl.innerHTML </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tempTableEl</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(++</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">depth</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-comment">// kill repeat to save bytes
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;table&gt;'</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">te </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;/table&gt;'</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">tbs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&lt;tbody&gt;'</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">tbe </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;/tbody&gt;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">trs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tbs </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&lt;tr&gt;'</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-var">tre </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;/tr&gt;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">/**
+     * @ignore
+     * Nasty code for IE's broken table implementation
+     */
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">insertIntoTable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tempTableEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">tempTableEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforeend'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// INTO a TD
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
+            } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(4, </span><span class="jsdoc-var">trs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tre</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">tbs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">);
+            } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterend'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">tbs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">);
+            } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{ </span><span class="jsdoc-comment">// INTO a TR
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(4, </span><span class="jsdoc-var">trs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tre</span><span class="jsdoc-syntax">);
+            }
+        } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'tbody'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(2, </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">);
+            } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterend'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(2, </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">);
+            } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">tbs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">);
+            }
+        } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{ </span><span class="jsdoc-comment">// TABLE
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterend'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// OUTSIDE the table
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(2, </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">el.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">before</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+    </span><span class="jsdoc-comment">/** True to force the use of DOM instead of html fragments @type Boolean */
+    </span><span class="jsdoc-var">useDom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the markup for the passed Element(s) config
+     * @param {Object} o The Dom object spec (and children)
+     * @return {String}
+     */
+    </span><span class="jsdoc-var">markup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Applies a style specification to an element
+     * @param {String/HTMLElement} el The element to apply styles to
+     * @param {String/Object/Function} styles A style specification string eg &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
+     * a function which returns such a specification.
+     */
+    </span><span class="jsdoc-var">applyStyles </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">, </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">matches </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">re.exec</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">)) != </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">[2]);
+               }
+           }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">style </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
+                  </span><span class="jsdoc-var">el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">]);
+               }
+           }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">Roo.DomHelper.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">styles.call</span><span class="jsdoc-syntax">());
+           }
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Inserts an HTML fragment into the Dom
+     * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
+     * @param {HTMLElement} el The context element
+     * @param {String} html The HTML fragmenet
+     * @return {HTMLElement} The new node
+     */
+    </span><span class="jsdoc-var">insertHtml </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">where.toLowerCase</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tableRe.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">insertIntoTable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName.toLowerCase</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforebegin&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'BeforeBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.previousSibling</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterbegin&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'AfterBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforeend&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'BeforeEnd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterend&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'AfterEnd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Illegal insertion point -&gt; &quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.ownerDocument.createRange</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">){
+             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforebegin&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">range.setStartBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.previousSibling</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterbegin&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">range.setStartBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">el.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+                }
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforeend&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
+                }
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterend&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Illegal insertion point -&gt; &quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates new Dom element(s) and inserts them before el
+     * @param {String/HTMLElement/Element} el The context element
+     * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+     * @param {Boolean} returnElement (optional) true to return a Roo.Element
+     * @return {HTMLElement/Roo.Element} The new node
+     */
+    </span><span class="jsdoc-var">insertBefore </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;beforeBegin&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates new Dom element(s) and inserts them after el
+     * @param {String/HTMLElement/Element} el The context element
+     * @param {Object} o The Dom object spec (and children)
+     * @param {Boolean} returnElement (optional) true to return a Roo.Element
+     * @return {HTMLElement/Roo.Element} The new node
+     */
+    </span><span class="jsdoc-var">insertAfter </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;afterEnd&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;nextSibling&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates new Dom element(s) and inserts them as the first child of el
+     * @param {String/HTMLElement/Element} el The context element
+     * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+     * @param {Boolean} returnElement (optional) true to return a Roo.Element
+     * @return {HTMLElement/Roo.Element} The new node
+     */
+    </span><span class="jsdoc-var">insertFirst </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;afterBegin&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">doInsert </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sibling</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useDom </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sibling </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sibling</span><span class="jsdoc-syntax">] : </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.insertHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates new Dom element(s) and appends them to el
+     * @param {String/HTMLElement/Element} el The context element
+     * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+     * @param {Boolean} returnElement (optional) true to return a Roo.Element
+     * @return {HTMLElement/Roo.Element} The new node
+     */
+    </span><span class="jsdoc-var">append </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useDom </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.insertHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeEnd&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates new Dom element(s) and overwrites the contents of el with them
+     * @param {String/HTMLElement/Element} el The context element
+     * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+     * @param {Boolean} returnElement (optional) true to return a Roo.Element
+     * @return {HTMLElement/Roo.Element} The new node
+     */
+    </span><span class="jsdoc-var">overwrite </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">) {
+          
+            </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.childNodes.length</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">el.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);   
+        }
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Creates a new Roo.DomHelper.Template from the Dom object spec
+     * @param {Object} o The Dom object spec (and children)
+     * @return {Roo.DomHelper.Template} The new template
+     */
+    </span><span class="jsdoc-var">createTemplate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+    }
+    };
+}();
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_DomQuery.js.html b/docs/symbols/src/Roo_DomQuery.js.html
new file mode 100644 (file)
index 0000000..cc5dc0a
--- /dev/null
@@ -0,0 +1,824 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/DomQuery.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/*
+ * This is code is also distributed under MIT license for use
+ * with jQuery and prototype JavaScript libraries.
+ */
+/**
+ * @class Roo.DomQuery
+Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
+&lt;p&gt;
+DomQuery supports most of the &lt;a href=&quot;http://www.w3.org/TR/2005/WD-css3-selectors-20051215/&quot;&gt;CSS3 selectors spec&lt;/a&gt;, along with some custom selectors and basic XPath.&lt;/p&gt;
+
+&lt;p&gt;
+All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example &quot;div.foo:nth-child(odd)[@foo=bar].bar:first&quot; would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
+&lt;/p&gt;
+&lt;h4&gt;Element Selectors:&lt;/h4&gt;
+&lt;ul class=&quot;list&quot;&gt;
+    &lt;li&gt; &lt;b&gt;*&lt;/b&gt; any element&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E&lt;/b&gt; an element with the tag E&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E F&lt;/b&gt; All descendent elements of E that have the tag F&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E &gt; F&lt;/b&gt; or &lt;b&gt;E/F&lt;/b&gt; all direct children elements of E that have the tag F&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E + F&lt;/b&gt; all elements with the tag F that are immediately preceded by an element with the tag E&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E ~ F&lt;/b&gt; all elements with the tag F that are preceded by a sibling element with the tag E&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h4&gt;Attribute Selectors:&lt;/h4&gt;
+&lt;p&gt;The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.&lt;/p&gt;
+&lt;ul class=&quot;list&quot;&gt;
+    &lt;li&gt; &lt;b&gt;E[foo]&lt;/b&gt; has an attribute &quot;foo&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E[foo=bar]&lt;/b&gt; has an attribute &quot;foo&quot; that equals &quot;bar&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E[foo^=bar]&lt;/b&gt; has an attribute &quot;foo&quot; that starts with &quot;bar&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E[foo$=bar]&lt;/b&gt; has an attribute &quot;foo&quot; that ends with &quot;bar&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E[foo*=bar]&lt;/b&gt; has an attribute &quot;foo&quot; that contains the substring &quot;bar&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E[foo%=2]&lt;/b&gt; has an attribute &quot;foo&quot; that is evenly divisible by 2&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E[foo!=bar]&lt;/b&gt; has an attribute &quot;foo&quot; that does not equal &quot;bar&quot;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h4&gt;Pseudo Classes:&lt;/h4&gt;
+&lt;ul class=&quot;list&quot;&gt;
+    &lt;li&gt; &lt;b&gt;E:first-child&lt;/b&gt; E is the first child of its parent&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:last-child&lt;/b&gt; E is the last child of its parent&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:nth-child(&lt;i&gt;n&lt;/i&gt;)&lt;/b&gt; E is the &lt;i&gt;n&lt;/i&gt;th child of its parent (1 based as per the spec)&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:nth-child(odd)&lt;/b&gt; E is an odd child of its parent&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:nth-child(even)&lt;/b&gt; E is an even child of its parent&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:only-child&lt;/b&gt; E is the only child of its parent&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:checked&lt;/b&gt; E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) &lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:first&lt;/b&gt; the first E in the resultset&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:last&lt;/b&gt; the last E in the resultset&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:nth(&lt;i&gt;n&lt;/i&gt;)&lt;/b&gt; the &lt;i&gt;n&lt;/i&gt;th E in the resultset (1 based)&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:odd&lt;/b&gt; shortcut for :nth-child(odd)&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:even&lt;/b&gt; shortcut for :nth-child(even)&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:contains(foo)&lt;/b&gt; E's innerHTML contains the substring &quot;foo&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:nodeValue(foo)&lt;/b&gt; E contains a textNode with a nodeValue that equals &quot;foo&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:not(S)&lt;/b&gt; an E element that does not match simple selector S&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:has(S)&lt;/b&gt; an E element that has a descendent that matches simple selector S&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:next(S)&lt;/b&gt; an E element whose next sibling matches simple selector S&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E:prev(S)&lt;/b&gt; an E element whose previous sibling matches simple selector S&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h4&gt;CSS Value Selectors:&lt;/h4&gt;
+&lt;ul class=&quot;list&quot;&gt;
+    &lt;li&gt; &lt;b&gt;E{display=none}&lt;/b&gt; css value &quot;display&quot; that equals &quot;none&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E{display^=none}&lt;/b&gt; css value &quot;display&quot; that starts with &quot;none&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E{display$=none}&lt;/b&gt; css value &quot;display&quot; that ends with &quot;none&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E{display*=none}&lt;/b&gt; css value &quot;display&quot; that contains the substring &quot;none&quot;&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E{display%=2}&lt;/b&gt; css value &quot;display&quot; that is evenly divisible by 2&lt;/li&gt;
+    &lt;li&gt; &lt;b&gt;E{display!=none}&lt;/b&gt; css value &quot;display&quot; that does not equal &quot;none&quot;&lt;/li&gt;
+&lt;/ul&gt;
+ * @singleton
+ */
+</span><span class="jsdoc-var">Roo.DomQuery </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cache </span><span class="jsdoc-syntax">= {}, </span><span class="jsdoc-var">simpleCache </span><span class="jsdoc-syntax">= {}, </span><span class="jsdoc-var">valueCache </span><span class="jsdoc-syntax">= {};
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nonSpace </span><span class="jsdoc-syntax">= /\S/;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">trimRe </span><span class="jsdoc-syntax">= /^\s+|\s+$/g;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tplRe </span><span class="jsdoc-syntax">= /\{(\d+)\}/g;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">modeRe </span><span class="jsdoc-syntax">= /^(\s?[\/&gt;+~]\s?|\s|$)/;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tagTokenRe </span><span class="jsdoc-syntax">= /^(#)?([\w-\*]+)/;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nthRe </span><span class="jsdoc-syntax">= /(\d*)n\+?(\d*)/, </span><span class="jsdoc-var">nthRe2 </span><span class="jsdoc-syntax">= /\D/;
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</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-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.firstChild</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">== 1){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(++</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+               }
+            }
+            </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">next</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">prev</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.previousSibling</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ni </span><span class="jsdoc-syntax">= -1;
+           </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">== 3 &amp;&amp; !</span><span class="jsdoc-var">nonSpace.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeValue</span><span class="jsdoc-syntax">)){
+                   </span><span class="jsdoc-var">d.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">);
+               }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                   </span><span class="jsdoc-var">n.nodeIndex </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">ni</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nx</span><span class="jsdoc-syntax">;
+           }
+           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+       };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">byClassName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">;
+        </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">ci.className</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) != -1){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">attrValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">n.tagName </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">n.length </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">[0];
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;for&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.htmlFor</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;class&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;className&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.className</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">];
+
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">getNodes</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;*&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">ns.getElementsByTagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">];
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">){
+            </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">ni</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ni </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ni.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                }
+            }
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;/&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">mode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;&gt;&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">utag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagName.toUpperCase</span><span class="jsdoc-syntax">();
+            </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">ni</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ni </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ni.children </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ni.childNodes</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">cj</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">cj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cj.nodeName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">utag </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">cj.nodeName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">tagName  </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'*'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">cj</span><span class="jsdoc-syntax">;
+                    }
+                }
+            }
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;+&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">utag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagName.toUpperCase</span><span class="jsdoc-syntax">();
+            </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">n</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">n.nodeName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">utag </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">n.nodeName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'*'</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+                }
+            }
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;~&quot;</span><span class="jsdoc-syntax">){
+            </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">n</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">) &amp;&amp; (</span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1 || (</span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'*' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">n.tagName.toLowerCase</span><span class="jsdoc-syntax">()!=</span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">)));
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+                }
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.slice</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+        }
+        </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">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">;
+    }
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">byTag</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs.tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">];
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+        </span><span class="jsdoc-var">tagName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagName.toLowerCase</span><span class="jsdoc-syntax">();
+        </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci.nodeType </span><span class="jsdoc-syntax">== 1 &amp;&amp; </span><span class="jsdoc-var">ci.tagName.toLowerCase</span><span class="jsdoc-syntax">()==</span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">byId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs.tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">];
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+        </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ci.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">byAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">op</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">custom</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">custom</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;{&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.operators</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">op</span><span class="jsdoc-syntax">];
+        </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">st</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;class&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;className&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ci.className</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;for&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ci.htmlFor</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;href&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ci.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;href&quot;</span><span class="jsdoc-syntax">, 2);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ci.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)) || (!</span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">byPseudo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomQuery.pseudos</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+    };
+
+    </span><span class="jsdoc-comment">// This is for IE MSXML which does not support expandos.
+    // IE runs the same speed using setAttribute, however FF slows way down
+    // and Safari completely fails so they need to continue to use expandos.
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.ActiveXObject </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">// this eval is stop the compressor from
+    // renaming the variable to something shorter
+    
+    /** eval:var:batch */
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">batch </span><span class="jsdoc-syntax">= 30803; 
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">= 30803;
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">nodupIEXml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_nodup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[0]];
+        </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">= 1, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">c.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_nodup&quot;</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">c.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_nodup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+            }
+        }
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_nodup&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    }
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">nodup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[];
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cj</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">cs.nodeType </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">== 1){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.selectSingleNode </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">nodupIEXml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">._nodup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 1; </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c._nodup </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">c._nodup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
+                }
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+1; </span><span class="jsdoc-var">cj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cj._nodup </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">cj._nodup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">cj</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    }
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">quickDiffIEXml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c1.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_qdiff&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c2.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_qdiff&quot;</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+            }
+        }
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c1.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+           </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;_qdiff&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    }
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">quickDiff</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">len1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c1.length</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">len1</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isIE </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.selectSingleNode</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">quickDiffIEXml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
+        </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">len1</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">._qdiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
+        </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c2.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">._qdiff </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+    }
+
+    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">quickId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">root.ownerDocument </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">;
+           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">getNodes</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;*&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">byId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+    }
+
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">getStyle </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">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">);
+        },
+        </span><span class="jsdoc-comment">/**
+         * Compiles a selector/xpath query into a reusable function. The returned function
+         * takes one parameter &quot;root&quot; (optional), which is the context node from where the query should start.
+         * @param {String} selector The selector/xpath query
+         * @param {String} type (optional) Either &quot;select&quot; (the default) or &quot;simple&quot; for a simple selector match
+         * @return {Function}
+         */
+        </span><span class="jsdoc-var">compile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">;
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-string">&quot;var f = function(root){\n var mode; ++batch; var n = root || document;\n&quot;</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">lq</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tk </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.matchers</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tklen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tk.length</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mm</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-comment">// accept leading mode switch
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lmode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.match</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">modeRe</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lmode </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">lmode</span><span class="jsdoc-syntax">[1]){
+                </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'mode=&quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">lmode</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trimRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-string">'&quot;;'</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lmode</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-comment">// strip leading slashes
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path.substr</span><span class="jsdoc-syntax">(0, 1)==</span><span class="jsdoc-string">&quot;/&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">path </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">path.substr</span><span class="jsdoc-syntax">(1);
+            }
+
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">lq </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">lq </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.match</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tagTokenRe</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[1] == </span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'n = quickId(n, mode, root, &quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[2]+</span><span class="jsdoc-string">'&quot;);'</span><span class="jsdoc-syntax">;
+                        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'n = getNodes(n, mode, &quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[2]+</span><span class="jsdoc-string">'&quot;);'</span><span class="jsdoc-syntax">;
+                        }
+                        </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+                    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">q.substr</span><span class="jsdoc-syntax">(0, 1) != </span><span class="jsdoc-string">'@'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'n = getNodes(n, mode, &quot;*&quot;);'</span><span class="jsdoc-syntax">;
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[1] == </span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'n = byId(n, null, &quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[2]+</span><span class="jsdoc-string">'&quot;);'</span><span class="jsdoc-syntax">;
+                        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'n = byTag(n, &quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[2]+</span><span class="jsdoc-string">'&quot;);'</span><span class="jsdoc-syntax">;
+                        }
+                        </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+                    }
+                }
+                </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">mm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.match</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">modeRe</span><span class="jsdoc-syntax">))){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">matched </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">tklen</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tk</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.match</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.re</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">t.select.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tplRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+                                                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                                                });
+                            </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+                            </span><span class="jsdoc-var">matched </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                            </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                        }
+                    }
+                    </span><span class="jsdoc-comment">// prevent infinite loop on bad selector
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">matched</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Error parsing selector, parsing failed at &quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mm</span><span class="jsdoc-syntax">[1]){
+                    </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">'mode=&quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">mm</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trimRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-string">'&quot;;'</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mm</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fn.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">&quot;return nodup(n);\n}&quot;</span><span class="jsdoc-syntax">;
+            
+             </span><span class="jsdoc-comment">/** 
+              * list of variables that need from compression as they are used by eval.
+             *  eval:var:batch 
+             *  eval:var:nodup
+             *  eval:var:byTag
+             *  eval:var:ById
+             *  eval:var:getNodes
+             *  eval:var:quickId
+             *  eval:var:mode
+             *  eval:var:root
+             *  eval:var:n
+             *  eval:var:byClassName
+             *  eval:var:byPseudo
+             *  eval:var:byAttribute
+             *  eval:var:attrValue
+             * 
+             **/ 
+            </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects a group of elements.
+         * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
+         * @param {Node} root (optional) The start of the query (defaults to document).
+         * @return {Array}
+         */
+        </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">root </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">root </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">root </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">root </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">root </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">paths </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">path.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;,&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">results </span><span class="jsdoc-syntax">= [];
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">paths.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">paths</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trimRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">]){
+                    </span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Roo.DomQuery.compile</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">]){
+                        </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; is not a valid selector&quot;</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">results </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">results.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">paths.length </span><span class="jsdoc-syntax">&gt; 1){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">nodup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">results</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">results</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects a single element.
+         * @param {String} selector The selector/xpath query
+         * @param {Node} root (optional) The start of the query (defaults to document).
+         * @return {Element}
+         */
+        </span><span class="jsdoc-var">selectNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomQuery.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">)[0];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects the value of a node, optionally replacing null with the defaultValue.
+         * @param {String} selector The selector/xpath query
+         * @param {Node} root (optional) The start of the query (defaults to document).
+         * @param {String} defaultValue
+         */
+        </span><span class="jsdoc-var">selectValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">path </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">path.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trimRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">valueCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">]){
+                </span><span class="jsdoc-var">valueCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Roo.DomQuery.compile</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">valueCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">[0] ? </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">[0] : </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.firstChild </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">n.firstChild.nodeValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">===</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">defaultValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects the value of a node, parsing integers and floats.
+         * @param {String} selector The selector/xpath query
+         * @param {Node} root (optional) The start of the query (defaults to document).
+         * @param {Number} defaultValue
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">selectNumber </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.selectValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">path</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultValue </span><span class="jsdoc-syntax">|| 0);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">parseFloat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
+         * @param {String/HTMLElement/Array} el An element id, element or array of elements
+         * @param {String} selector The simple selector to test
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">is </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">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isArray </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">el </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.filter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isArray </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">isArray </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">result.length </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">el.length</span><span class="jsdoc-syntax">) : (</span><span class="jsdoc-var">result.length </span><span class="jsdoc-syntax">&gt; 0);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
+         * @param {Array} el An array of elements to filter
+         * @param {String} selector The simple selector to test
+         * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
+         * the selector instead of the ones that match
+         * @return {Array}
+         */
+        </span><span class="jsdoc-var">filter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nonMatches</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trimRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">simpleCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">]){
+                </span><span class="jsdoc-var">simpleCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Roo.DomQuery.compile</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;simple&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">simpleCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">nonMatches </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">quickDiff</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Collection of matching regular expressions and code snippets.
+         */
+        </span><span class="jsdoc-var">matchers </span><span class="jsdoc-syntax">: [{
+                </span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">: /^\.([\w-]+)/,
+                </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'n = byClassName(n, null, &quot; {1} &quot;);'
+            </span><span class="jsdoc-syntax">}, {
+                </span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">: /^\:([\w-]+)(?:\(((?:[^\s&gt;\/]*|.*?))\))?/,
+                </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'n = byPseudo(n, &quot;{1}&quot;, &quot;{2}&quot;);'
+            </span><span class="jsdoc-syntax">},{
+                </span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['&quot;]?(.*?)[&quot;']?)?[\]\}])/,
+                </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'n = byAttribute(n, &quot;{2}&quot;, &quot;{4}&quot;, &quot;{3}&quot;, &quot;{1}&quot;);'
+            </span><span class="jsdoc-syntax">}, {
+                </span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">: /^#([\w-]+)/,
+                </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'n = byId(n, null, &quot;{1}&quot;);'
+            </span><span class="jsdoc-syntax">},{
+                </span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">: /^@([\w-]+)/,
+                </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'return {firstChild:{nodeValue:attrValue(n, &quot;{1}&quot;)}};'
+            </span><span class="jsdoc-syntax">}
+        ],
+
+        </span><span class="jsdoc-comment">/**
+         * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
+         * New operators can be added as long as the match the format &lt;i&gt;c&lt;/i&gt;= where &lt;i&gt;c&lt;/i&gt; is any character other than space, &amp;gt; &amp;lt;.
+         */
+        </span><span class="jsdoc-var">operators </span><span class="jsdoc-syntax">: {
+            </span><span class="jsdoc-string">&quot;=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+            },
+            </span><span class="jsdoc-string">&quot;!=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+            },
+            </span><span class="jsdoc-string">&quot;^=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">a.substr</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">v.length</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+            },
+            </span><span class="jsdoc-string">&quot;$=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">a.substr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">v.length</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+            },
+            </span><span class="jsdoc-string">&quot;*=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">a.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) !== -1;
+            },
+            </span><span class="jsdoc-string">&quot;%=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) == 0;
+            },
+            </span><span class="jsdoc-string">&quot;|=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">a.substr</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">v.length</span><span class="jsdoc-syntax">+1) == </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-'</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-string">&quot;~=&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">) != -1;
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Collection of &quot;pseudo class&quot; processors. Each processor is passed the current nodeset (array)
+         * and the argument (if any) supplied in the selector.
+         */
+        </span><span class="jsdoc-var">pseudos </span><span class="jsdoc-syntax">: {
+            </span><span class="jsdoc-string">&quot;first-child&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.previousSibling</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;last-child&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;nth-child&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nthRe.exec</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;even&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-string">&quot;2n&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;odd&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-string">&quot;2n+1&quot; </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">nthRe2.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-string">&quot;n+&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[1] || 1) - 0, </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[2] - 0;
+                </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">n</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.parentNode</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">batch </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">pn._batch</span><span class="jsdoc-syntax">) {
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0;
+                        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pn.firstChild</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.nextSibling</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.nodeType </span><span class="jsdoc-syntax">== 1){
+                               </span><span class="jsdoc-var">cn.nodeIndex </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">;
+                            }
+                        }
+                        </span><span class="jsdoc-var">pn._batch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">batch</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">== 1) {
+                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">== 0 || </span><span class="jsdoc-var">n.nodeIndex </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+                        }
+                    } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n.nodeIndex </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">) % </span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">== 0){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+                    }
+                }
+
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;only-child&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">prev</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">) &amp;&amp; !</span><span class="jsdoc-var">next</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">)){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;empty&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ci.childNodes</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]){
+                        ++</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">;
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.nodeType </span><span class="jsdoc-syntax">== 1 || </span><span class="jsdoc-var">cn.nodeType </span><span class="jsdoc-syntax">== 3){
+                            </span><span class="jsdoc-var">empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                            </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                        }
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">empty</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;contains&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">ci.textContent</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">ci.innerText</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) != -1){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;nodeValue&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci.firstChild </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ci.firstChild.nodeValue </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;checked&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci.checked </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;not&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomQuery.filter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            },
+
+            </span><span class="jsdoc-string">&quot;odd&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;nth-child&quot;</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;odd&quot;</span><span class="jsdoc-syntax">);
+            },
+
+            </span><span class="jsdoc-string">&quot;even&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;nth-child&quot;</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;even&quot;</span><span class="jsdoc-syntax">);
+            },
+
+            </span><span class="jsdoc-string">&quot;nth&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">-1] || [];
+            },
+
+            </span><span class="jsdoc-string">&quot;first&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[0] || [];
+            },
+
+            </span><span class="jsdoc-string">&quot;last&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.length</span><span class="jsdoc-syntax">-1] || [];
+            },
+
+            </span><span class="jsdoc-string">&quot;has&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.select</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.length </span><span class="jsdoc-syntax">&gt; 0){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;next&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">is </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.is</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">next</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">)){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            },
+
+            </span><span class="jsdoc-string">&quot;prev&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">is </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.is</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [], </span><span class="jsdoc-var">ri </span><span class="jsdoc-syntax">= -1;
+                </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">ci</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">ci </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">prev</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">)){
+                        </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">;
+                    }
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            }
+        }
+    };
+}();
+
+</span><span class="jsdoc-comment">/**
+ * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
+ * @param {String} path The selector/xpath query
+ * @param {Node} root (optional) The start of the query (defaults to document).
+ * @return {Array}
+ * @member Roo
+ * @method query
+ */
+</span><span class="jsdoc-var">Roo.query </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.select</span><span class="jsdoc-syntax">;
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Editor.js.html b/docs/symbols/src/Roo_Editor.js.html
new file mode 100644 (file)
index 0000000..6b19c70
--- /dev/null
@@ -0,0 +1,333 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Editor.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.Editor
+ * @extends Roo.Component
+ * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
+ * @constructor
+ * Create a new Editor
+ * @param {Roo.form.Field} field The Field object (or descendant)
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.Editor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.Editor.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">);
+    </span><span class="jsdoc-var">this.field </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+            * @event beforestartedit
+            * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
+            * false from the handler of this event.
+            * @param {Editor} this
+            * @param {Roo.Element} boundEl The underlying element bound to this editor
+            * @param {Mixed} value The field value being set
+            */
+        </span><span class="jsdoc-string">&quot;beforestartedit&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event startedit
+            * Fires when this editor is displayed
+            * @param {Roo.Element} boundEl The underlying element bound to this editor
+            * @param {Mixed} value The starting field value
+            */
+        </span><span class="jsdoc-string">&quot;startedit&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event beforecomplete
+            * Fires after a change has been made to the field, but before the change is reflected in the underlying
+            * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
+            * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
+            * event will not fire since no edit actually occurred.
+            * @param {Editor} this
+            * @param {Mixed} value The current field value
+            * @param {Mixed} startValue The original field value
+            */
+        </span><span class="jsdoc-string">&quot;beforecomplete&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+            * @event complete
+            * Fires after editing is complete and any changed value has been written to the underlying field.
+            * @param {Editor} this
+            * @param {Mixed} value The current field value
+            * @param {Mixed} startValue The original field value
+            */
+        </span><span class="jsdoc-string">&quot;complete&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event specialkey
+         * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
+         * {@link Roo.EventObject#getKey} to determine which key was pressed.
+         * @param {Roo.form.Field} this
+         * @param {Roo.EventObject} e The event object
+         */
+        </span><span class="jsdoc-string">&quot;specialkey&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean/String} autosize
+     * True for the editor to automatically adopt the size of the underlying field, &quot;width&quot; to adopt the width only,
+     * or &quot;height&quot; to adopt the height only (defaults to false)
+     */
+    /**
+     * @cfg {Boolean} revertInvalid
+     * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
+     * validation fails (defaults to true)
+     */
+    /**
+     * @cfg {Boolean} ignoreNoChange
+     * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
+     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
+     * will never be ignored.
+     */
+    /**
+     * @cfg {Boolean} hideEl
+     * False to keep the bound element visible while the editor is displayed (defaults to true)
+     */
+    /**
+     * @cfg {Mixed} value
+     * The data value of the underlying field (defaults to &quot;&quot;)
+     */
+    </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} alignment
+     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to &quot;c-c?&quot;).
+     */
+    </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;c-c?&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean/String} shadow &quot;sides&quot; for sides/bottom only, &quot;frame&quot; for 4-way shadow, and &quot;drop&quot;
+     * for bottom-right shadow (defaults to &quot;frame&quot;)
+     */
+    </span><span class="jsdoc-var">shadow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;frame&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} constrain True to constrain the editor to the viewport
+     */
+    </span><span class="jsdoc-var">constrain </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
+     */
+    </span><span class="jsdoc-var">completeOnEnter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
+     */
+    </span><span class="jsdoc-var">cancelOnEsc </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+     */
+    </span><span class="jsdoc-var">updateEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// private
+    </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">){
+        </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Layer</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">shadow</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-editor&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">parentEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">shim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">shadowOffset</span><span class="jsdoc-syntax">:4,
+            </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">constrain</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.constrain
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.isGecko </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.field.msgTarget </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'title'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.field.msgTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.field.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
+        </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-var">this.field.el.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'autocomplete'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'off'</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.field.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;specialkey&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onSpecialKey</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.swallowKeys</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.field.el.swallowEvent</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'keydown'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'keypress'</span><span class="jsdoc-syntax">]);
+        }
+        </span><span class="jsdoc-var">this.field.show</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.field.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;blur&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBlur</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.field.grow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.field.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;autosize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.el.sync</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delay</span><span class="jsdoc-syntax">:1});
+        }
+    },
+
+    </span><span class="jsdoc-var">onSpecialKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.completeOnEnter </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">e.ENTER</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.completeEdit</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cancelOnEsc </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">e.ESC</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.cancelEdit</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'specialkey'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Starts the editing process and shows the editor.
+     * @param {String/HTMLElement/Element} el The element to edit
+     * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
+      * to the innerHTML of el.
+     */
+    </span><span class="jsdoc-var">startEdit </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">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.completeEdit</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.boundEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.boundEl.dom.innerHTML</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.parentEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforestartedit&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.boundEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.startValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.field.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoSize</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.boundEl.getSize</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoSize</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;width&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sz.width</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;height&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">sz.height</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sz.width</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">sz.height</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-var">this.el.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boundEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.alignment</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.editing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.QuickTips</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.QuickTips.disable</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the height and width of this editor.
+     * @param {Number} width The new width
+     * @param {Number} height The new height
+     */
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.field.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.sync</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Realigns the editor to the bound field based on the current alignment config value.
+     */
+    </span><span class="jsdoc-var">realign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boundEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.alignment</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
+     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
+     */
+    </span><span class="jsdoc-var">completeEdit </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remainVisible</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.editing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.revertInvalid </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.field.isValid</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.cancelEdit</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">this.ignoreNoChange</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.editing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforecomplete&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.editing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.updateEl </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.boundEl</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.boundEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remainVisible </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;complete&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideEl </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.boundEl.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.field.show</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.fixIEFocus</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// IE has problems with focusing the first time
+            </span><span class="jsdoc-var">this.fixIEFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.deferredFocus.defer</span><span class="jsdoc-syntax">(50, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.field.focus</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;startedit&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.boundEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">deferredFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.field.focus</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
+     * reverted to the original starting value.
+     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
+     * cancel (defaults to false)
+     */
+    </span><span class="jsdoc-var">cancelEdit </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remainVisible</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remainVisible </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowBlur </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.editing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.completeEdit</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.completeEdit</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.field.blur</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.field.collapse</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.field.collapse</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideEl </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.boundEl.show</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.QuickTips</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.QuickTips.enable</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the data value of the editor
+     * @param {Mixed} value Any valid value supported by the underlying field
+     */
+    </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.field.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Gets the data value of the editor
+     * @return {Mixed} The data value
+     */
+    </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.field.getValue</span><span class="jsdoc-syntax">();
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Element.js.html b/docs/symbols/src/Roo_Element.js.html
new file mode 100644 (file)
index 0000000..3fe912c
--- /dev/null
@@ -0,0 +1,2973 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Element.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+// was in Composite Element!??!?!
+</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">D </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">E </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Event</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">A </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Anim</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">// local style camelizing for speed
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">propCache </span><span class="jsdoc-syntax">= {};
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">camelRe </span><span class="jsdoc-syntax">= /(-[a-z])/gi;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">camelFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a.charAt</span><span class="jsdoc-syntax">(1)</span><span class="jsdoc-var">.toUpperCase</span><span class="jsdoc-syntax">(); };
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">view </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.defaultView</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.Element
+ * Represents an Element in the DOM.&lt;br&gt;&lt;br&gt;
+ * Usage:&lt;br&gt;
+&lt;pre&gt;&lt;code&gt;
+var el = Roo.get(&quot;my-div&quot;);
+
+// or with getEl
+var el = getEl(&quot;my-div&quot;);
+
+// or with a DOM element
+var el = Roo.get(myDivElement);
+&lt;/code&gt;&lt;/pre&gt;
+ * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
+ * each call instead of constructing a new one.&lt;br&gt;&lt;br&gt;
+ * &lt;b&gt;Animations&lt;/b&gt;&lt;br /&gt;
+ * Many of the functions for manipulating an element have an optional &quot;animate&quot; parameter. The animate parameter
+ * should either be a boolean (true) or an object literal with animation options. The animation options are:
+&lt;pre&gt;
+Option    Default   Description
+--------- --------  ---------------------------------------------
+duration  .35       The duration of the animation in seconds
+easing    easeOut   The YUI easing method
+callback  none      A function to execute when the anim completes
+scope     this      The scope (this) of the callback function
+&lt;/pre&gt;
+* Also, the Anim object being used for the animation will be set on your options object as &quot;anim&quot;, which allows you to stop or
+* manipulate the animation. Here's an example:
+&lt;pre&gt;&lt;code&gt;
+var el = Roo.get(&quot;my-div&quot;);
+
+// no animation
+el.setWidth(100);
+
+// default animation
+el.setWidth(100, true);
+
+// animation with some options set
+el.setWidth(100, {
+    duration: 1,
+    callback: this.foo,
+    scope: this
+});
+
+// using the &quot;anim&quot; property to get the Anim object
+var opt = {
+    duration: 1,
+    callback: this.foo,
+    scope: this
+};
+el.setWidth(100, opt);
+...
+if(opt.anim.isAnimated()){
+    opt.anim.stop();
+}
+&lt;/code&gt;&lt;/pre&gt;
+* &lt;b&gt; Composite (Collections of) Elements&lt;/b&gt;&lt;br /&gt;
+ * For working with collections of Elements, see &lt;a href=&quot;Roo.CompositeElement.html&quot;&gt;Roo.CompositeElement&lt;/a&gt;
+ * @constructor Create a new Element directly.
+ * @param {String/HTMLElement} element
+ * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
+ */
+    </span><span class="jsdoc-var">Roo.Element </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">forceNew</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">element </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot; </span><span class="jsdoc-syntax">?
+                </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// invalid id/element
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dom.id</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">forceNew </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.Element.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]){ </span><span class="jsdoc-comment">// element object already exists
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.Element.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
+        }
+
+        </span><span class="jsdoc-comment">/**
+         * The DOM element
+         * @type HTMLElement
+         */
+        </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-comment">/**
+         * The DOM element ID
+         * @type String
+         */
+        </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">);
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">El </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-var">El.prototype </span><span class="jsdoc-syntax">= {
+        </span><span class="jsdoc-comment">/**
+         * The element's default display mode  (defaults to &quot;&quot;)
+         * @type String
+         */
+        </span><span class="jsdoc-var">originalDisplay </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-var">visibilityMode </span><span class="jsdoc-syntax">: 1,
+        </span><span class="jsdoc-comment">/**
+         * The default unit to append to CSS values where a unit isn't provided (defaults to px).
+         * @type String
+         */
+        </span><span class="jsdoc-var">defaultUnit </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's visibility mode. When setVisible() is called it
+         * will use this to determine whether to set the visibility or the display property.
+         * @param visMode Element.VISIBILITY or Element.DISPLAY
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setVisibilityMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visMode</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.visibilityMode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">visMode</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+        </span><span class="jsdoc-comment">/**
+         * Convenience method for setVisibilityMode(Element.DISPLAY)
+         * @param {String} display (optional) What to set display to when visible
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">enableDisplayMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">El.DISPLAY</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">this.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
+         * @param {String} selector The simple selector to test
+         * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
+                search as a number or element (defaults to 10 || document.body)
+         * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
+         * @return {HTMLElement} The matching DOM node (or null if no match was found)
+         */
+        </span><span class="jsdoc-var">findParent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">depth </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">dq </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">stopEl</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">maxDepth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxDepth </span><span class="jsdoc-syntax">|| 50;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">maxDepth </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;number&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">stopEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">maxDepth </span><span class="jsdoc-syntax">= 10;
+            }
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p.nodeType </span><span class="jsdoc-syntax">== 1 &amp;&amp; </span><span class="jsdoc-var">depth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">maxDepth </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">stopEl</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dq.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnEl </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">depth</span><span class="jsdoc-syntax">++;
+                </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.parentNode</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        },
+
+
+        </span><span class="jsdoc-comment">/**
+         * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
+         * @param {String} selector The simple selector to test
+         * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
+                search as a number or element (defaults to 10 || document.body)
+         * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
+         * @return {HTMLElement} The matching DOM node (or null if no match was found)
+         */
+        </span><span class="jsdoc-var">findParentNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">p.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
+         * This is a shortcut for findParentNode() that always returns an Roo.Element.
+         * @param {String} selector The simple selector to test
+         * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
+                search as a number or element (defaults to 10 || document.body)
+         * @return {Roo.Element} The matching DOM node (or null if no match was found)
+         */
+        </span><span class="jsdoc-var">up </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.findParentNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        },
+
+
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
+         * @param {String} selector The simple selector to test
+         * @return {Boolean} True if this element matches the selector, else false
+         */
+        </span><span class="jsdoc-var">is </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomQuery.is</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">simpleSelector</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Perform animation on this element.
+         * @param {Object} args The YUI animation control args
+         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
+         * @param {Function} onComplete (optional) Function to call when animation completes
+         * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
+         * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">onComplete</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">easing</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">onComplete</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">easing</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">easing</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/*
+         * @private Internal animation call
+         */
+        </span><span class="jsdoc-var">anim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultDur</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultEase</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">animType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">animType </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'run'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">|| {};
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Anim</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">](
+                </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">,
+                (</span><span class="jsdoc-var">opt.duration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">defaultDur</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35,
+                (</span><span class="jsdoc-var">opt.easing </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">defaultEase</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">opt.callback</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">]);
+                },
+                </span><span class="jsdoc-var">this
+            </span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">opt.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private legacy anim prep
+        </span><span class="jsdoc-var">preanim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] ? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]: {</span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+1], </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+2], </span><span class="jsdoc-var">easing</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+3]});
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes worthless text nodes
+         * @param {Boolean} forceReclean (optional) By default the element
+         * keeps track if it has been cleaned already so
+         * you can call this over and over. However, if you update the element and
+         * need to force a reclean, you can pass true.
+         */
+        </span><span class="jsdoc-var">clean </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">forceReclean</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isCleaned </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">forceReclean </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= /\S/;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">d.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ni </span><span class="jsdoc-syntax">= -1;
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">== 3 &amp;&amp; !</span><span class="jsdoc-var">ns.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeValue</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">d.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">n.nodeIndex </span><span class="jsdoc-syntax">= ++</span><span class="jsdoc-var">ni</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nx</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.isCleaned </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">calcOffsetsTo </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">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">restorePos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'static'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'relative'</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">restorePos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">=0;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">op.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'HTML'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">op.offsetLeft</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">op.offsetTop</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">op.offsetParent</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">restorePos</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'static'</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Scrolls this element into view within the passed container.
+         * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
+         * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">scrollIntoView </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hscroll</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calcOffsetsTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[0],
+                </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[1],
+                </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">el.offsetHeight</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">el.offsetWidth</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.clientHeight</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ct </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.scrollTop</span><span class="jsdoc-syntax">, 10);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.scrollLeft</span><span class="jsdoc-syntax">, 10);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cl </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">c.clientWidth</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">c.scrollTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">c.scrollTop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hscroll </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">cl</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">c.scrollLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">cr</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">c.scrollLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">c.clientWidth</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">scrollChildIntoView </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">child</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hscroll</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">child</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_scrollChildIntoView'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.scrollIntoView</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hscroll</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
+         * the new height may not be available immediately.
+         * @param {Boolean} animate (optional) Animate the transition (defaults to false)
+         * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
+         * @param {Function} onComplete (optional) Function to call when animation completes
+         * @param {String} easing (optional) Easing method to use (defaults to easeOut)
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">autoHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">onComplete</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">easing</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">oldHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.clip</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.setHeight</span><span class="jsdoc-syntax">(1); </span><span class="jsdoc-comment">// force clipping
+            </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.scrollHeight</span><span class="jsdoc-syntax">, 10); </span><span class="jsdoc-comment">// parseInt for Safari
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">this.unclip</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">onComplete </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">onComplete</span><span class="jsdoc-syntax">();
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">this.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">oldHeight</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// restore original height
+                    </span><span class="jsdoc-var">this.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                        </span><span class="jsdoc-var">this.unclip</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">onComplete </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">onComplete</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">), </span><span class="jsdoc-var">easing</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">), 0);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if this element is an ancestor of the passed element
+         * @param {HTMLElement/String} el The element to check
+         * @return {Boolean} True if this element is an ancestor of el, else false
+         */
+        </span><span class="jsdoc-var">contains </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">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){</span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;}
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">D.isAncestor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Checks whether the element is currently visible using both visibility and display properties.
+         * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
+         * @return {Boolean} True if the element is currently visible, else false
+         */
+        </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">deep</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vis </span><span class="jsdoc-syntax">= !(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibility&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;hidden&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">deep </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">vis</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">vis</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p.tagName.toLowerCase</span><span class="jsdoc-syntax">() != </span><span class="jsdoc-string">&quot;body&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_isVisible'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.isVisible</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.parentNode</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
+         * @param {String} selector The CSS selector
+         * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
+         * @return {CompositeElement/CompositeElementLite} The composite element
+         */
+        </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unique</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">El.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unique</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
+         * @param {String} selector The CSS selector
+         * @return {Array} An array of the matched nodes
+         */
+        </span><span class="jsdoc-var">query </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unique</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomQuery.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
+         * @param {String} selector The CSS selector
+         * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
+         * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
+         */
+        </span><span class="jsdoc-var">child </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnDom </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
+         * @param {String} selector The CSS selector
+         * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
+         * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
+         */
+        </span><span class="jsdoc-var">down </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot; &gt; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnDom </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Initializes a {@link Roo.dd.DD} drag drop object for this element.
+         * @param {String} group The group the DD object is member of
+         * @param {Object} config The DD config object
+         * @param {Object} overrides An object containing methods to override/implement on the DD object
+         * @return {Roo.dd.DD} The DD object
+         */
+        </span><span class="jsdoc-var">initDD </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">group</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DD</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">group</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Initializes a {@link Roo.dd.DDProxy} object for this element.
+         * @param {String} group The group the DDProxy object is member of
+         * @param {Object} config The DDProxy config object
+         * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
+         * @return {Roo.dd.DDProxy} The DDProxy object
+         */
+        </span><span class="jsdoc-var">initDDProxy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">group</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DDProxy</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">group</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Initializes a {@link Roo.dd.DDTarget} object for this element.
+         * @param {String} group The group the DDTarget object is member of
+         * @param {Object} config The DDTarget config object
+         * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
+         * @return {Roo.dd.DDTarget} The DDTarget object
+         */
+        </span><span class="jsdoc-var">initDDTarget </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">group</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DDTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">group</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
+         * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
+         * @param {Boolean} visible Whether the element is visible
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">setVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.visibilityMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">El.DISPLAY</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">visible </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;visible&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-comment">// closure for composites
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">visMode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.visibilityMode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.setOpacity</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">01);
+                    </span><span class="jsdoc-var">this.setVisible</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">: { </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">?1:0) }},
+                      </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1),
+                      </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35, </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">){
+                             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">El.DISPLAY</span><span class="jsdoc-syntax">){
+                                 </span><span class="jsdoc-var">dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
+                             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                                 </span><span class="jsdoc-var">dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
+                             }
+                             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setOpacity</span><span class="jsdoc-syntax">(1);
+                         }
+                     });
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if display is not &quot;none&quot;
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">isDisplayed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Toggles the element's visibility or display, depending on visibility mode.
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setVisible</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
+         * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setDisplayed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;boolean&quot;</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.originalDisplay </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Tries to focus the element. Any exceptions are caught and ignored.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.dom.focus</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Tries to blur the element. Any exceptions are caught and ignored.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">blur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.dom.blur</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
+         * @param {String/Array} className The CSS class to add, or an array of classes
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">addClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">className.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                    </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">this.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.className </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">;
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
+         * @param {String/Array} className The CSS class to add, or an array of classes
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">radioClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">siblings </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.parentNode.childNodes</span><span class="jsdoc-syntax">;
+            </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">siblings.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">siblings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s.nodeType </span><span class="jsdoc-syntax">== 1){
+                    </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes one or more CSS classes from the element.
+         * @param {String/Array} className The CSS class to remove, or an array of classes
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">removeClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">className </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.dom.className</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">className.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                    </span><span class="jsdoc-var">this.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.classReCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">];
+                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">) {
+                       </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">RegExp</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'(?:^|\\s+)' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">className </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'(?:\\s+|$)'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;g&quot;</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">this.classReCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-var">this.dom.className </span><span class="jsdoc-syntax">=
+                        </span><span class="jsdoc-var">this.dom.className.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot; &quot;</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">classReCache</span><span class="jsdoc-syntax">: {},
+
+        </span><span class="jsdoc-comment">/**
+         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
+         * @param {String} className The CSS class to toggle
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">toggleClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-var">this.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Checks if the specified CSS class exists on this element's DOM node.
+         * @param {String} className The CSS class to check for
+         * @return {Boolean} True if the class exists, else false
+         */
+        </span><span class="jsdoc-var">hasClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">className </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.dom.className</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">) != -1;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
+         * @param {String} oldClassName The CSS class to replace
+         * @param {String} newClassName The replacement CSS class
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">replaceClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">oldClassName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newClassName</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">oldClassName</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newClassName</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns an object with properties matching the styles requested.
+         * For example, el.getStyles('color', 'font-size', 'width') might return
+         * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
+         * @param {String} style1 A style name
+         * @param {String} style2 A style name
+         * @param {String} etc.
+         * @return {Object} The style object
+         */
+        </span><span class="jsdoc-var">getStyles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= {};
+            </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">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]] = </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
+         * @param {String} property The style property whose value is returned.
+         * @return {String} The current value of the style property for this element.
+         */
+        </span><span class="jsdoc-var">getStyle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">view </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">view.getComputedStyle </span><span class="jsdoc-syntax">?
+                </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'float'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;cssFloat&quot;</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.style </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">])){
+                        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">view.getComputedStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">)){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">propCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">])){
+                            </span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">propCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">prop.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">camelRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">camelFn</span><span class="jsdoc-syntax">);
+                        }
+                        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">];
+                    }
+                    </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+                } :
+                </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'opacity'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el.style.filter </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.style.filter.match</span><span class="jsdoc-syntax">(/alpha\(opacity=(.*)\)/i);
+                            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
+                                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseFloat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[1]);
+                                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fv</span><span class="jsdoc-syntax">)){
+                                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fv </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">fv </span><span class="jsdoc-syntax">/ 100 : 0;
+                                }
+                            }
+                        }
+                        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">1;
+                    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'float'</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;styleFloat&quot;</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">propCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">])){
+                        </span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">propCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">prop.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">camelRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">camelFn</span><span class="jsdoc-syntax">);
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">]){
+                        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.currentStyle</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">];
+                    }
+                    </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+                };
+        }(),
+
+        </span><span class="jsdoc-comment">/**
+         * Wrapper for setting style properties, also takes single object parameter of multiple styles.
+         * @param {String/Object} property The style property to be set, or an object of multiple styles.
+         * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setStyle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">propCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">])){
+                    </span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">propCache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">prop.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">camelRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">camelFn</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">camel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'opacity'</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">this.setOpacity</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">camel</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">style </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                       </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">]);
+                    }
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * More flexible version of {@link #setStyle} for setting style properties.
+         * @param {String/Object/Function} styles A style specification string, e.g. &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
+         * a function which returns such a specification.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">applyStyles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.DomHelper.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+          * Gets the current X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+          * @return {Number} The X position of the element
+          */
+        </span><span class="jsdoc-var">getX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">D.getX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+          * Gets the current Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+          * @return {Number} The Y position of the element
+          */
+        </span><span class="jsdoc-var">getY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">D.getY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+          * Gets the current position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+          * @return {Array} The XY position of the element
+          */
+        </span><span class="jsdoc-var">getXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">D.getXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+         * @param {Number} The X position of the element
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">D.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getY</span><span class="jsdoc-syntax">()], </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+         * @param {Number} The Y position of the element
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">D.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">this.getX</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's left position directly using CSS style (instead of {@link #setX}).
+         * @param {String} left The left CSS property value
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's top position directly using CSS style (instead of {@link #setY}).
+         * @param {String} top The top CSS property value
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's CSS right style.
+         * @param {String} right The right CSS property value
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setRight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's CSS bottom style.
+         * @param {String} bottom The bottom CSS property value
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setBottom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+         * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+         * @param {Array} pos Contains X &amp; Y [x, y] values for new position (coordinates are page-based)
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">D.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1), </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+         * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+         * @param {Number} x X value for new position (coordinates are page-based)
+         * @param {Number} y Y value for new position (coordinates are page-based)
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setLocation </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+         * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+         * @param {Number} x X value for new position (coordinates are page-based)
+         * @param {Number} y Y value for new position (coordinates are page-based)
+         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">moveTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the region of the given element.
+         * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
+         * @return {Region} A Roo.lib.Region containing &quot;top, left, bottom, right&quot; member data.
+         */
+        </span><span class="jsdoc-var">getRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">D.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the offset height of the element
+         * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
+         * @return {Number} The element's height
+         */
+        </span><span class="jsdoc-var">getHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">contentHeight</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.offsetHeight </span><span class="jsdoc-syntax">|| 0;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">contentHeight </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the offset width of the element
+         * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
+         * @return {Number} The element's width
+         */
+        </span><span class="jsdoc-var">getWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">contentWidth</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.offsetWidth </span><span class="jsdoc-syntax">|| 0;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">contentWidth </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
+         * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
+         * if a height has not been set using CSS.
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getComputedHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.offsetHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom.clientHeight</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'height'</span><span class="jsdoc-syntax">), 10) || 0;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isBorderBox</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
+         * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
+         * if a width has not been set using CSS.
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getComputedWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.offsetWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom.clientWidth</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'width'</span><span class="jsdoc-syntax">), 10) || 0;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isBorderBox</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the size of the element.
+         * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
+         * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
+         */
+        </span><span class="jsdoc-var">getSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">contentSize</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">contentSize</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">contentSize</span><span class="jsdoc-syntax">)};
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the width and height of the viewport.
+         * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
+         */
+        </span><span class="jsdoc-var">getViewSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">= 0;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">doc.body</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">D.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">D.getViewHeight</span><span class="jsdoc-syntax">()};
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">d.clientWidth</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">d.clientHeight
+                </span><span class="jsdoc-syntax">};
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the value of the &quot;value&quot; attribute
+         * @param {Boolean} asNumber true to parse the value as a number
+         * @return {String/Number}
+         */
+        </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">asNumber</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">asNumber </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.value</span><span class="jsdoc-syntax">, 10) : </span><span class="jsdoc-var">this.dom.value</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">adjustWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;number&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoBoxAdjust </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.isBorderBox</span><span class="jsdoc-syntax">()){
+                   </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">-= (</span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">));
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">&lt; 0){
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= 0;
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">adjustHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;number&quot;</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoBoxAdjust </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.isBorderBox</span><span class="jsdoc-syntax">()){
+                   </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">-= (</span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">));
+               }
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">&lt; 0){
+                   </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= 0;
+               }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Set the width of the element
+         * @param {Number} width The new width
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Set the height of the element
+         * @param {Number} height The new height
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.style.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Set the size of the element. If animation is true, both width an height will be animated concurrently.
+         * @param {Number} width The new width
+         * @param {Number} height The new height
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// in case of object from getSize()
+                </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width.height</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width.width</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">); </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.dom.style.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
+         * @param {Number} x X value for new position (coordinates are page-based)
+         * @param {Number} y Y value for new position (coordinates are page-based)
+         * @param {Number} width The new width
+         * @param {Number} height The new height
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setBounds </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.setLocation</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">); </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">]}, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">}},
+                              </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 4), </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's position and size the the specified region. If animation is true then width, height, x and y will be animated concurrently.
+         * @param {Roo.lib.Region} region The region to fill
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region.top</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region.right</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">region.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region.bottom</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">region.top</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Appends an event handler
+         *
+         * @param {String}   eventName     The type of event to append
+         * @param {Function} fn        The method the event invokes
+         * @param {Object} scope       (optional) The scope (this object) of the fn
+         * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
+         */
+        </span><span class="jsdoc-var">addListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes an event handler from this element
+         * @param {String} eventName the type of event to remove
+         * @param {Function} fn the method the event invokes
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">removeListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.EventManager.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes all previous added listeners from this element
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">removeAllListeners </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">E.purgeElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-var">relayEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">observable</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</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">){
+                </span><span class="jsdoc-var">observable.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            });
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Set the opacity of the element
+         * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">setOpacity </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">s.zoom </span><span class="jsdoc-syntax">= 1;
+                    </span><span class="jsdoc-var">s.filter </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">s.filter </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/alpha\([^\)]*\)/gi,</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">) +
+                               (</span><span class="jsdoc-var">opacity </span><span class="jsdoc-syntax">== 1 ? </span><span class="jsdoc-string">&quot;&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;alpha(opacity=&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">opacity </span><span class="jsdoc-syntax">* 100 + </span><span class="jsdoc-string">&quot;)&quot;</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">s.opacity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">;
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1), </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35, </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the left X coordinate
+         * @param {Boolean} local True to get the local css position instead of page coordinate
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getX</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">), 10) || 0;
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the right X coordinate of the element (element X position + element width)
+         * @param {Boolean} local True to get the local css position instead of page coordinate
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getRight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getX</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">()) || 0;
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the top Y coordinate
+         * @param {Boolean} local True to get the local css position instead of page coordinate
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getY</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">), 10) || 0;
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the bottom Y coordinate of the element (element Y position + element height)
+         * @param {Boolean} local True to get the local css position instead of page coordinate
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getBottom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getY</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">()) || 0;
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Initializes positioning on this element. If a desired position is not passed, it will make the
+        * the element positioned relative IF it is not already positioned.
+        * @param {String} pos (optional) Positioning to use &quot;relative&quot;, &quot;absolute&quot; or &quot;fixed&quot;
+        * @param {Number} zIndex (optional) The zIndex to apply
+        * @param {Number} x (optional) Set the page X position
+        * @param {Number} y (optional) Set the page Y position
+        */
+        </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">zIndex</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'static'</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'relative'</span><span class="jsdoc-syntax">);
+               }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">zIndex</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">zIndex</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">]);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Clear positioning back to the default when the document was loaded
+        * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
+        * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">clearPositioning </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</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">,
+                </span><span class="jsdoc-string">&quot;position&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;static&quot;
+            </span><span class="jsdoc-syntax">});
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
+        * snapshot before performing an update and then restoring the element.
+        * @return {Object}
+        */
+        </span><span class="jsdoc-var">getPositioning </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-string">&quot;position&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-string">&quot;left&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;right&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-string">&quot;top&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">&quot;bottom&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-string">&quot;z-index&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">)
+            };
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the width of the border(s) for the specified side(s)
+         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
+         * passing lr would get the border (l)eft width + the border (r)ight width.
+         * @return {Number} The width of the sides passed added together
+         */
+        </span><span class="jsdoc-var">getBorderWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">El.borders</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the width of the padding(s) for the specified side(s)
+         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
+         * passing lr would get the padding (l)eft + the padding (r)ight.
+         * @return {Number} The padding of the sides passed added together
+         */
+        </span><span class="jsdoc-var">getPadding </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">El.paddings</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Set positioning with an object returned by getPositioning().
+        * @param {Object} posCfg
+        * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setPositioning </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pc</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pc</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pc.right </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.style.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pc.bottom </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.style.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">fixDisplay </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibility&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.originalDisplay</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// first try reverting to default
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// if that fails, default to block
+                    </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;block&quot;</span><span class="jsdoc-syntax">);
+                }
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Quick set left and top adding default units
+         * @param {String} left The left CSS property value
+         * @param {String} top The top CSS property value
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">setLeftTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.dom.style.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Move this element relative to its current position.
+         * @param {String} direction Possible values are: &quot;l&quot;,&quot;left&quot; - &quot;r&quot;,&quot;right&quot; - &quot;t&quot;,&quot;top&quot;,&quot;up&quot; - &quot;b&quot;,&quot;bottom&quot;,&quot;down&quot;.
+         * @param {Number} distance How far to move the element in pixels
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">move </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">direction</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">direction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">direction.toLowerCase</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">direction</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">this.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]-</span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">this.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]+</span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">:
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;up&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">this.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]-</span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">:
+               </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;down&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">this.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+</span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">clip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isClipped</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">this.isClipped </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-var">this.originalClip </span><span class="jsdoc-syntax">= {
+                   </span><span class="jsdoc-string">&quot;o&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">),
+                   </span><span class="jsdoc-string">&quot;x&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-x&quot;</span><span class="jsdoc-syntax">),
+                   </span><span class="jsdoc-string">&quot;y&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-y&quot;</span><span class="jsdoc-syntax">)
+               };
+               </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-x&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-y&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         *  Return clipping (overflow) to original clipping before clip() was called
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">unclip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isClipped</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.isClipped </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.originalClip</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.o</span><span class="jsdoc-syntax">){</span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.o</span><span class="jsdoc-syntax">);}
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.x</span><span class="jsdoc-syntax">){</span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-x&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.x</span><span class="jsdoc-syntax">);}
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.y</span><span class="jsdoc-syntax">){</span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-y&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.y</span><span class="jsdoc-syntax">);}
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the x,y coordinates specified by the anchor position on the element.
+         * @param {String} anchor (optional) The specified anchor position (defaults to &quot;c&quot;).  See {@link #alignTo} for details on supported anchor positions.
+         * @param {Object} size (optional) An object containing the size to use for calculating anchor position
+         *                       {width: (target width), height: (target height)} (defaults to the element's current size)
+         * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
+         * @return {Array} [x, y] An array containing the element's x and y coordinates
+         */
+        </span><span class="jsdoc-var">getAnchorXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">//Passing a different size is useful for pre-calculating anchors,
+            //especially for anchored animations that change the el size.
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">vp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">vp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">D.getViewWidth</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">D.getViewHeight</span><span class="jsdoc-syntax">();
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.width</span><span class="jsdoc-syntax">;  </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.height</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;c&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= 0;
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= 0;
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">*</span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5);
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= 0;
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= 0;
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= 0;
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= 0;
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">];
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">vp</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getScroll</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sc.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sc.top</span><span class="jsdoc-syntax">];
+            }
+            </span><span class="jsdoc-comment">//Add the element's offset xy
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[1]];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
+         * supported position values.
+         * @param {String/HTMLElement/Roo.Element} element The element to align to.
+         * @param {String} position The position to align to.
+         * @param {Array} offsets (optional) Offset the positioning by [x, y]
+         * @return {Array} [x, y]
+         */
+        </span><span class="jsdoc-var">getAlignToXY </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">, </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Element.alignTo with an element that doesn't exist&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">//constrain to viewport
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">p2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| [0,0];
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;tl-bl&quot;</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;?&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;tl-bl?&quot;</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;-&quot;</span><span class="jsdoc-syntax">) == -1){
+                </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;tl-&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.toLowerCase</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.match</span><span class="jsdoc-syntax">(/^([a-z]+)-([a-z]+)(\?)?$/);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Element.alignTo with an invalid alignment &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">p1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[1]; </span><span class="jsdoc-var">p2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[2]; </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= !!</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">[3];
+
+            </span><span class="jsdoc-comment">//Subtract the aligned el's internal xy from the target's offset xy
+            //plus custom offset to get the aligned el's new offset xy
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getAnchorXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getAnchorXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a2</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">a1</span><span class="jsdoc-syntax">[0] + </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[0];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a2</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">a1</span><span class="jsdoc-syntax">[1] + </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[1];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-comment">//constrain the aligned el to viewport if necessary
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getRegion</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-comment">// 5px of margin for ie
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">D.getViewWidth</span><span class="jsdoc-syntax">()-5, </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">D.getViewHeight</span><span class="jsdoc-syntax">()-5;
+
+                </span><span class="jsdoc-comment">//If we are at a viewport boundary and the aligned el is anchored on a target border that is
+                //perpendicular to the vp border, allow the aligned el to slide on that border,
+                //otherwise swap the aligned el to the opposite border of the target.
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p1y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p1.charAt</span><span class="jsdoc-syntax">(0), </span><span class="jsdoc-var">p1x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p1.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p1.length</span><span class="jsdoc-syntax">-1);
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p2y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p2.charAt</span><span class="jsdoc-syntax">(0), </span><span class="jsdoc-var">p2x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p2.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p2.length</span><span class="jsdoc-syntax">-1);
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">swapY </span><span class="jsdoc-syntax">= ((</span><span class="jsdoc-var">p1y</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;t&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p2y</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">p1y</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;b&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p2y</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">));
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">swapX </span><span class="jsdoc-syntax">= ((</span><span class="jsdoc-var">p1x</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;r&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p2x</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">p1x</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;l&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p2x</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">));
+
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">;
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scrollX </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">doc.documentElement.scrollLeft </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.body.scrollLeft </span><span class="jsdoc-syntax">|| 0)+5;
+               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scrollY </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">doc.documentElement.scrollTop </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.body.scrollTop </span><span class="jsdoc-syntax">|| 0)+5;
+
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">dw </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">scrollX</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">swapX </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">r.left</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">dw</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">scrollX</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+                }
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">scrollX</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">swapX </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">r.right </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scrollX</span><span class="jsdoc-syntax">;
+               }
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">scrollY</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">swapY </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">r.top</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">dh</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">scrollY</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                }
+               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">scrollY</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">swapY </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">r.bottom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scrollY</span><span class="jsdoc-syntax">;
+               }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">];
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">getConstrainToXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">os </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">: 0};
+
+            </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">proposedXY</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">offsets </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">offsets </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">os</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">os</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">vh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">vx </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">vy </span><span class="jsdoc-syntax">= 0;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">();
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.clientWidth</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.clientHeight</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getXY</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">vx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vxy</span><span class="jsdoc-syntax">[0];
+                        </span><span class="jsdoc-var">vy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vxy</span><span class="jsdoc-syntax">[1];
+                    }
+                }
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getScroll</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-var">vx </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">offsets.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">vy </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">offsets.top </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">offsets.right</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">offsets.bottom</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vx</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">vw</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vy</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">vh</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">proposedXY </span><span class="jsdoc-syntax">|| (!</span><span class="jsdoc-var">local </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">() : [</span><span class="jsdoc-var">this.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">this.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)]);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1];
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.offsetWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.offsetHeight</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-comment">// only move it if it needs it
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-comment">// first validate right/bottom
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">vr</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vr </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">vb</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vb </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-comment">// then make sure top/left isn't negative
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">vx</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vx</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">vy</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vy</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">? [</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">] : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            };
+        }(),
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">adjustForConstraints </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getConstrainToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parent </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">) ||  </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Aligns this element with another element relative to the specified anchor points. If the other element is the
+         * document it aligns it to the viewport.
+         * The position parameter is optional, and can be specified in any one of the following formats:
+         * &lt;ul&gt;
+         *   &lt;li&gt;&lt;b&gt;Blank&lt;/b&gt;: Defaults to aligning the element's top-left corner to the target's bottom-left corner (&quot;tl-bl&quot;).&lt;/li&gt;
+         *   &lt;li&gt;&lt;b&gt;One anchor (deprecated)&lt;/b&gt;: The passed anchor position is used as the target element's anchor point.
+         *       The element being aligned will position its top-left corner (tl) to that point.  &lt;i&gt;This method has been
+         *       deprecated in favor of the newer two anchor syntax below&lt;/i&gt;.&lt;/li&gt;
+         *   &lt;li&gt;&lt;b&gt;Two anchors&lt;/b&gt;: If two values from the table below are passed separated by a dash, the first value is used as the
+         *       element's anchor point, and the second value is used as the target's anchor point.&lt;/li&gt;
+         * &lt;/ul&gt;
+         * In addition to the anchor points, the position parameter also supports the &quot;?&quot; character.  If &quot;?&quot; is passed at the end of
+         * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
+         * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
+         * that specified in order to enforce the viewport constraints.
+         * Following are all of the supported anchor positions:
+    &lt;pre&gt;
+    Value  Description
+    -----  -----------------------------
+    tl     The top left corner (default)
+    t      The center of the top edge
+    tr     The top right corner
+    l      The center of the left edge
+    c      In the center of the element
+    r      The center of the right edge
+    bl     The bottom left corner
+    b      The center of the bottom edge
+    br     The bottom right corner
+    &lt;/pre&gt;
+    Example Usage:
+    &lt;pre&gt;&lt;code&gt;
+    // align el to other-el using the default positioning (&quot;tl-bl&quot;, non-constrained)
+    el.alignTo(&quot;other-el&quot;);
+
+    // align the top left corner of el with the top right corner of other-el (constrained to viewport)
+    el.alignTo(&quot;other-el&quot;, &quot;tr?&quot;);
+
+    // align the bottom right corner of el with the center left edge of other-el
+    el.alignTo(&quot;other-el&quot;, &quot;br-l?&quot;);
+
+    // align the center of el with the bottom left corner of other-el and
+    // adjust the x position by -6 pixels (and the y position by 0)
+    el.alignTo(&quot;other-el&quot;, &quot;c-bl&quot;, [-6, 0]);
+    &lt;/code&gt;&lt;/pre&gt;
+         * @param {String/HTMLElement/Roo.Element} element The element to align to.
+         * @param {String} position The position to align to.
+         * @param {Array} offsets (optional) Offset the positioning by [x, y]
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">alignTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 3));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Anchors an element to another element and realigns it when the window is resized.
+         * @param {String/HTMLElement/Roo.Element} element The element to align to.
+         * @param {String} position The position to align to.
+         * @param {Array} offsets (optional) Offset the positioning by [x, y]
+         * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
+         * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
+         * is a number, it is used as the buffer delay (defaults to 50ms).
+         * @param {Function} callback The function to call after the animation finishes
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">anchorTo </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">, </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">monitorScroll</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">action </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">this.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">offsets</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            };
+            </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">action</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">monitorScroll</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'scroll'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">action</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
+                    {</span><span class="jsdoc-var">buffer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">tm </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">monitorScroll </span><span class="jsdoc-syntax">: 50});
+            }
+            </span><span class="jsdoc-var">action.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// align immediately
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+        </span><span class="jsdoc-comment">/**
+         * Clears any opacity settings from this element. Required in some cases for IE.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">clearOpacity </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window.ActiveXObject</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.dom.style.filter </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">&amp;&amp; (/alpha/i)</span><span class="jsdoc-var">.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.style.filter</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">this.dom.style.filter </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+                }
+            } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.dom.style.opacity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;-moz-opacity&quot;</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;-khtml-opacity&quot;</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Hide this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setVisible</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Show this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
+        * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setVisible</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * @private Test if size has a unit, otherwise appends the default
+         */
+        </span><span class="jsdoc-var">addUnits </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.Element.addUnits</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.defaultUnit</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">beginMeasure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.offsetWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el.offsetHeight</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// offsets work already
+            </span><span class="jsdoc-syntax">}
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">changed </span><span class="jsdoc-syntax">= [];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// start with this element
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">((!</span><span class="jsdoc-var">el.offsetWidth </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">el.offsetHeight</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p.tagName </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pe </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pe.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">changed.push</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">visibility</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pe.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibility&quot;</span><span class="jsdoc-syntax">)});
+                    </span><span class="jsdoc-var">p.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">p.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;block&quot;</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.parentNode</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this._measureChanged </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">changed</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Restores displays to before beginMeasure was called
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">endMeasure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">changed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._measureChanged</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">changed</span><span class="jsdoc-syntax">){
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">changed.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">changed</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                    </span><span class="jsdoc-var">r.el.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.visibility</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">r.el.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">this._measureChanged </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Update the innerHTML of this element, optionally searching for and processing scripts
+        * @param {String} html The new HTML
+        * @param {Boolean} loadScripts (optional) true to look for and process scripts
+        * @param {Function} callback For async script loading you can be noticed when the update completes
+        * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">update </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">loadScripts </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'&lt;span id=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;&gt;&lt;/span&gt;'</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">E.onAvailable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;head&quot;</span><span class="jsdoc-syntax">)[0];
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= /(?:&lt;script([^&gt;]*)?&gt;)((\n|\r|.)*?)(?:&lt;\/script&gt;)/ig;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">srcRe </span><span class="jsdoc-syntax">= /\ssrc=([\'\&quot;])(.*?)\1/i;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">typeRe </span><span class="jsdoc-syntax">= /\stype=([\'\&quot;])(.*?)\1/i;
+
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">re.exec</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">attrs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">[1];
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">srcMatch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">attrs </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">attrs.match</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">srcRe</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">srcMatch </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">srcMatch</span><span class="jsdoc-syntax">[2]){
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;script&quot;</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-var">s.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">srcMatch</span><span class="jsdoc-syntax">[2];
+                       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">typeMatch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">attrs.match</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">typeRe</span><span class="jsdoc-syntax">);
+                       </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">typeMatch </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">typeMatch</span><span class="jsdoc-syntax">[2]){
+                           </span><span class="jsdoc-var">s.type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">typeMatch</span><span class="jsdoc-syntax">[2];
+                       }
+                       </span><span class="jsdoc-var">hd.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
+                    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">[2] &amp;&amp; </span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.length </span><span class="jsdoc-syntax">&gt; 0){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window.execScript</span><span class="jsdoc-syntax">) {
+                           </span><span class="jsdoc-var">window.execScript</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">[2]);
+                        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                            </span><span class="jsdoc-comment">/**
+                             * eval:var:id
+                             * eval:var:dom
+                             * eval:var:html
+                             * 
+                             */
+                           </span><span class="jsdoc-var">window.eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">[2]);
+                        }
+                    }
+                }
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){</span><span class="jsdoc-var">el.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);}
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">callback </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">();
+                }
+            });
+            </span><span class="jsdoc-var">dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html.replace</span><span class="jsdoc-syntax">(/(?:&lt;script.*?&gt;)((\n|\r|.)*?)(?:&lt;\/script&gt;)/ig, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Direct access to the UpdateManager update() method (takes the same parameters).
+         * @param {String/Function} url The url for this request or a function to call to get the url
+         * @param {String/Object} params (optional) The parameters to pass as either a url encoded string &quot;param1=1&amp;amp;param2=2&quot; or an object {param1: 1, param2: 2}
+         * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
+         * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">load </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">um </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getUpdateManager</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">um.update.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">um</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Gets this element's UpdateManager
+        * @return {Roo.UpdateManager} The UpdateManager
+        */
+        </span><span class="jsdoc-var">getUpdateManager </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.updateManager</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.updateManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.UpdateManager</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updateManager</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Disables text selection for this element (normalized across browsers)
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">unselectable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">this.dom.unselectable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.swallowEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;selectstart&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;-moz-user-select:none;-khtml-user-select:none;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-unselectable&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Calculates the x, y to center this element on the screen
+        * @return {Array} The x, y values [x, y]
+        */
+        </span><span class="jsdoc-var">getCenterXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'c-c'</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+        * Centers the Element in either the viewport, or another Element.
+        * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
+        */
+        </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">centerIn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">centerIn </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'c-c'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Tests various css rules/browsers to determine if this element uses a border box
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">isBorderBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">noBoxAdjust</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.dom.tagName.toLowerCase</span><span class="jsdoc-syntax">()] || </span><span class="jsdoc-var">Roo.isBorderBox</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Return a box {x, y, width, height} that can be used to set another elements
+         * size/location to match this element.
+         * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
+         * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
+         * @return {Object} box An object in the format {x, y, width, height}
+         */
+        </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">contentBox</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">), 10) || 0;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">), 10) || 0;
+                </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">];
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.offsetWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.offsetHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bx</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">contentBox</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">bx </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1], 0: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], 1: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">bx </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]+</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, 0: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]+</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, 1: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">)};
+            }
+            </span><span class="jsdoc-var">bx.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">bx.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">bx.width</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">bx.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">bx.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">bx.height</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">bx</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the sum width of the padding and borders for the passed &quot;sides&quot;. See getBorderWidth()
+         for more information about the sides.
+         * @param {String} sides
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getFrameWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sides</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">onlyContentBox</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">onlyContentBox </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isBorderBox </span><span class="jsdoc-syntax">? 0 : (</span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sides</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sides</span><span class="jsdoc-syntax">));
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
+         * @param {Object} box The box to fill {x, y, width, height}
+         * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">setBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">adjust</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">adjust </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.autoBoxAdjust</span><span class="jsdoc-syntax">) &amp;&amp; !</span><span class="jsdoc-var">this.isBorderBox</span><span class="jsdoc-syntax">()){
+               </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= (</span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">));
+               </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= (</span><span class="jsdoc-var">this.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">this.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">));
+            }
+            </span><span class="jsdoc-var">this.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2));
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Forces the browser to repaint this element
+         * @return {Roo.Element} this
+         */
+         </span><span class="jsdoc-var">repaint </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-repaint&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-repaint&quot;</span><span class="jsdoc-syntax">);
+            }, 1);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
+         * then it returns the calculated width of the sides (see getPadding)
+         * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
+         * @return {Object/Number}
+         */
+        </span><span class="jsdoc-var">getMargins </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;margin-top&quot;</span><span class="jsdoc-syntax">), 10) || 0,
+                    </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;margin-left&quot;</span><span class="jsdoc-syntax">), 10) || 0,
+                    </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;margin-bottom&quot;</span><span class="jsdoc-syntax">), 10) || 0,
+                    </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;margin-right&quot;</span><span class="jsdoc-syntax">), 10) || 0
+                };
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">El.margins</span><span class="jsdoc-syntax">);
+             }
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">addStyles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sides</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">val </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sides.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sides.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">)]);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, 10);
+                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-var">val </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">; }
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Creates a proxy element of this element
+         * @param {String/Object} config The class name of the proxy element or a DomHelper config object
+         * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
+         * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
+         * @return {Roo.Element} The new proxy element
+         */
+        </span><span class="jsdoc-var">createProxy </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">, </span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">matchBox</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">renderTo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">renderTo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">?
+                </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">: {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">};
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">proxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">matchBox</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">proxy.setBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">());
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">proxy</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Puts a mask over this element to disable user interaction. Requires core.css.
+         * This method can only be applied to elements which accept child nodes.
+         * @param {String} msg (optional) A message to display in the mask
+         * @param {String} msgCls (optional) A css class to apply to the msg element
+         * @return {Element} The mask  element
+         */
+        </span><span class="jsdoc-var">mask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">msgCls</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;static&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this._mask</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this._mask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;roo-el-mask&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-masked&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this._mask.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">msg </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this._maskMsg</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this._maskMsg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;roo-el-mask-msg&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._maskMsg</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">mm.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msgCls </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;roo-el-mask-msg &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">msgCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;roo-el-mask-msg&quot;</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">mm.dom.firstChild.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">mm.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">mm.center</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !(</span><span class="jsdoc-var">Roo.isIE7 </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isStrict</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'height'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// ie will not expand full height automatically
+                </span><span class="jsdoc-var">this._mask.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">());
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this._mask</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
+         * it is cached for reuse.
+         */
+        </span><span class="jsdoc-var">unmask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this._mask</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this._mask.remove</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this._mask</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this._maskMsg</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">this._maskMsg.remove</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this._maskMsg</span><span class="jsdoc-syntax">;
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">this._mask.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this._maskMsg</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">this._maskMsg.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                    }
+                }
+            }
+            </span><span class="jsdoc-var">this.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-masked&quot;</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if this element is masked
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">isMasked </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this._mask </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this._mask.isVisible</span><span class="jsdoc-syntax">();
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Creates an iframe shim for this element to keep selects and other windowed objects from
+         * showing through.
+         * @return {Roo.Element} The new shim element
+         */
+        </span><span class="jsdoc-var">createShim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'iframe'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.frameBorder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'no'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-shim'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isSecure</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.SSL_SECURE_URL</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">shim.autoBoxAdjust </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">shim</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes this element from the DOM and deletes it from the cache
+         */
+        </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.dom.id</span><span class="jsdoc-syntax">];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets up event handlers to add and remove a css class when the mouse is over this element
+         * @param {String} className
+         * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
+         * mouseout events for children elements
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">addClassOnOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preventFlicker</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</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">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">removeFn </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">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">preventFlicker </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+                }
+            };
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">removeFn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets up event handlers to add and remove a css class when this element has the focus
+         * @param {String} className
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">addClassOnFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;focus&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;blur&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+        </span><span class="jsdoc-comment">/**
+         * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
+         * @param {String} className
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">addClassOnClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </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-keyword">var </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'_internal'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">d.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+                };
+                </span><span class="jsdoc-var">d.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+            });
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Stops the specified event from bubbling and optionally prevents the default action
+         * @param {String} eventName
+         * @param {Boolean} preventDefault (optional) true to prevent the default action too
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">swallowEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fn </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">){
+                </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+                }
+            };
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">eventName.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                     </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * @private
+         */
+      </span><span class="jsdoc-var">fitToParentDelegate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// keep a reference to the fitToParent delegate
+
+        /**
+         * Sizes this element to its parent element's dimensions performing
+         * neccessary box adjustments.
+         * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
+         * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">fitToParent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">monitorResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">targetParent</span><span class="jsdoc-syntax">) {
+          </span><span class="jsdoc-var">Roo.EventManager.removeResizeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fitToParentDelegate</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// always remove previous fitToParent delegate from onWindowResize
+          </span><span class="jsdoc-var">this.fitToParentDelegate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// remove reference to previous delegate
+          </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">monitorResize </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// check if this Element still exists
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+          }
+          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targetParent </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">);
+          </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getComputedWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">p.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">p.getComputedHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">p.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
+          </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">monitorResize </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.fitToParentDelegate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fitToParent.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">targetParent</span><span class="jsdoc-syntax">]);
+            </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fitToParentDelegate</span><span class="jsdoc-syntax">);
+          }
+          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the next sibling, skipping text nodes
+         * @return {HTMLElement} The next sibling or null
+         */
+        </span><span class="jsdoc-var">getNextSibling </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.nextSibling</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1){
+                </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the previous sibling, skipping text nodes
+         * @return {HTMLElement} The previous sibling or null
+         */
+        </span><span class="jsdoc-var">getPrevSibling </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.previousSibling</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1){
+                </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.previousSibling</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+        },
+
+
+        </span><span class="jsdoc-comment">/**
+         * Appends the passed element(s) to this element
+         * @param {String/HTMLElement/Array/Element/CompositeElement} el
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">appendChild</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">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.appendTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
+         * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
+         * automatically generated with the specified attributes.
+         * @param {HTMLElement} insertBefore (optional) a child element of this element
+         * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
+         * @return {Roo.Element} The new child element
+         */
+        </span><span class="jsdoc-var">createChild</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">, </span><span class="jsdoc-var">insertBefore</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">};
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">insertBefore</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomHelper.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">insertBefore</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnDom </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">[!</span><span class="jsdoc-var">this.dom.firstChild </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'overwrite' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'append'</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">returnDom </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Appends this element to the passed element
+         * @param {String/HTMLElement/Element} el The new parent element
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">appendTo</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">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Inserts this element before the passed element in the DOM
+         * @param {String/HTMLElement/Element} el The element to insert before
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">insertBefore</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">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Inserts this element after the passed element in the DOM
+         * @param {String/HTMLElement/Element} el The element to insert after
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">insertAfter</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">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
+         * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
+         * @return {Roo.Element} The new child
+         */
+        </span><span class="jsdoc-var">insertFirst</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">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">|| {};
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">el.nodeType</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// dh config
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom.firstChild</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">returnDom </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
+         * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
+         * @param {String} where (optional) 'before' or 'after' defaults to before
+         * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
+         * @return {Roo.Element} the inserted Element
+         */
+        </span><span class="jsdoc-var">insertSibling</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">, </span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">where.toLowerCase</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-string">'before'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">|| {};
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">refNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'before' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dom.nextSibling</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">el.nodeType</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// dh config
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'after' </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.dom.nextSibling</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, !</span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'after' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'insertAfter' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'insertBefore'</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, !</span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">);
+                }
+
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">),
+                            </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'before' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dom.nextSibling</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">rt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rt</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rt</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Creates and wraps this element with another element
+         * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
+         * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
+         * @return {HTMLElement/Element} The newly created wrapper element
+         */
+        </span><span class="jsdoc-var">wrap</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">, </span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= {</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-keyword">var </span><span class="jsdoc-var">newEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, !</span><span class="jsdoc-var">returnDom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">newEl.dom </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">newEl.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">newEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">newEl</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Replaces the passed element with this element
+         * @param {String/HTMLElement/Element} el The element to replace
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">replace</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">){
+            </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">el.remove</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Inserts an html fragment into this element
+         * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
+         * @param {String} html The HTML fragment
+         * @param {Boolean} returnEl True to return an Roo.Element
+         * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
+         */
+        </span><span class="jsdoc-var">insertHtml </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.insertHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnEl </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
+         * @param {Object} o The object with the attributes
+         * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">set </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">useSet</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">useSet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">useSet </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">el.setAttribute </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">useSet</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">attr </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;style&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">];
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">useSet</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">el.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">]);
+                    </span><span class="jsdoc-keyword">else </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">];
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.style</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">Roo.DomHelper.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.style</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Convenience method for constructing a KeyMap
+         * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
+         *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+         * @param {Function} fn The function to call
+         * @param {Object} scope (optional) The scope of the function
+         * @return {Roo.KeyMap} The KeyMap created
+         */
+        </span><span class="jsdoc-var">addKeyListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= {
+                    </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope
+                </span><span class="jsdoc-syntax">};
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= {
+                    </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">key.key</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">key.shift</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">ctrl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">key.ctrl</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">key.alt</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope
+                </span><span class="jsdoc-syntax">};
+            }
+            </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.KeyMap</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">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Creates a KeyMap for this element
+         * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
+         * @return {Roo.KeyMap} The KeyMap created
+         */
+        </span><span class="jsdoc-var">addKeyMap </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">){
+            </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.KeyMap</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">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if this element is scrollable.
+         * @return {Boolean}
+         */
+         </span><span class="jsdoc-var">isScrollable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dom.scrollHeight </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">dom.clientHeight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">dom.scrollWidth </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">dom.clientWidth</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
+         * @param {String} side Either &quot;left&quot; for scrollLeft values or &quot;top&quot; for scrollTop values.
+         * @param {Number} value The new scroll value
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Element} this
+         */
+
+        </span><span class="jsdoc-var">scrollTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">side</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">side.toLowerCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">&quot;left&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;scrollLeft&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;scrollTop&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">prop </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;scrollLeft&quot; </span><span class="jsdoc-syntax">? [</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom.scrollTop</span><span class="jsdoc-syntax">] : [</span><span class="jsdoc-var">this.dom.scrollLeft</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-var">this.anim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">scroll</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-string">&quot;to&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2), </span><span class="jsdoc-string">'scroll'</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
+         * within this element's scrollable range.
+         * @param {String} direction Possible values are: &quot;l&quot;,&quot;left&quot; - &quot;r&quot;,&quot;right&quot; - &quot;t&quot;,&quot;top&quot;,&quot;up&quot; - &quot;b&quot;,&quot;bottom&quot;,&quot;down&quot;.
+         * @param {Number} distance How far to scroll the element in pixels
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Boolean} Returns true if a scroll was triggered or false if the element
+         * was scrolled as far as it could go.
+         */
+         </span><span class="jsdoc-var">scroll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">direction</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">){
+             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isScrollable</span><span class="jsdoc-syntax">()){
+                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+             }
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.scrollLeft</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.scrollTop</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.scrollWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.scrollHeight</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.clientWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.clientHeight</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-var">direction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">direction.toLowerCase</span><span class="jsdoc-syntax">();
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scrolled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.preanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 2);
+             </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">direction</span><span class="jsdoc-syntax">){
+                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">:
+                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">cw</span><span class="jsdoc-syntax">){
+                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">cw</span><span class="jsdoc-syntax">);
+                         </span><span class="jsdoc-var">this.scrollTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                         </span><span class="jsdoc-var">scrolled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                     }
+                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">:
+                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">&gt; 0){
+                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, 0);
+                         </span><span class="jsdoc-var">this.scrollTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                         </span><span class="jsdoc-var">scrolled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                     }
+                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;up&quot;</span><span class="jsdoc-syntax">:
+                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&gt; 0){
+                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, 0);
+                         </span><span class="jsdoc-var">this.scrollTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                         </span><span class="jsdoc-var">scrolled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                     }
+                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;down&quot;</span><span class="jsdoc-syntax">:
+                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">){
+                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">distance</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">);
+                         </span><span class="jsdoc-var">this.scrollTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">);
+                         </span><span class="jsdoc-var">scrolled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                     }
+                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+             }
+             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">scrolled</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Translates the passed page coordinates into left/top css values for this element
+         * @param {Number/Array} x The page x or an array containing [x, y]
+         * @param {Number} y The page y
+         * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
+         */
+        </span><span class="jsdoc-var">translatePoints </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">x </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">[1]; </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">[0];
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">), 10);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">), 10);
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">) ? 0 : </span><span class="jsdoc-var">this.dom.offsetLeft</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">) ? 0 : </span><span class="jsdoc-var">this.dom.offsetTop</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[0] + </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[1] + </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)};
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the current scroll position of the element.
+         * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
+         */
+        </span><span class="jsdoc-var">getScroll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">doc.body</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.pageXOffset </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.documentElement.scrollLeft </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.body.scrollLeft </span><span class="jsdoc-syntax">|| 0;
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.pageYOffset </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.documentElement.scrollTop </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.body.scrollTop </span><span class="jsdoc-syntax">|| 0;
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">};
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">d.scrollLeft</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">d.scrollTop</span><span class="jsdoc-syntax">};
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
+         * are convert to standard 6 digit hex color.
+         * @param {String} attr The css attribute
+         * @param {String} defaultValue The default value to use when a valid color isn't found
+         * @param {String} prefix (optional) defaults to #. Use an empty string when working with
+         * YUI color anims.
+         */
+        </span><span class="jsdoc-var">getColor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">prefix</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;transparent&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;inherit&quot;</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">prefix </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;#&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">prefix</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.substr</span><span class="jsdoc-syntax">(0, 4) == </span><span class="jsdoc-string">&quot;rgb(&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rvs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.slice</span><span class="jsdoc-syntax">(4, </span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">-1)</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;,&quot;</span><span class="jsdoc-syntax">);
+                </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; 3; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rvs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">])</span><span class="jsdoc-var">.toString</span><span class="jsdoc-syntax">(16);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&lt; 16){
+                        </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+                }
+            } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.substr</span><span class="jsdoc-syntax">(0, 1) == </span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">== 4) {
+                        </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">= 1; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; 4; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
+                            </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">+=  </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+                        }
+                    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">== 7){
+                        </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">v.substr</span><span class="jsdoc-syntax">(1);
+                    }
+                }
+            }
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color.length </span><span class="jsdoc-syntax">&gt; 5 ? </span><span class="jsdoc-var">color.toLowerCase</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">defaultValue</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
+         * gradient background, rounded corners and a 4-way shadow.
+         * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
+         * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
+         * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
+         * @return {Roo.Element} this
+         */
+        </span><span class="jsdoc-var">boxWrap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'x-box'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.insertHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&lt;div class=&quot;{0}&quot;&gt;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">El.boxMarkup</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&lt;/div&gt;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">)));
+            </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-mc'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns the value of a namespaced attribute from the element's underlying DOM node.
+         * @param {String} namespace The namespace in which to look for the attribute
+         * @param {String} name The attribute name
+         * @return {String} The attribute value
+         */
+        </span><span class="jsdoc-var">getAttributeNS </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;:&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'unknown'</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;:&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">];
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">];
+        } : </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d.getAttributeNS</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">d.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;:&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">d.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">];
+        }
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ep </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.prototype</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">/**
+     * Appends an event handler (Shorthand for addListener)
+     * @param {String}   eventName     The type of event to append
+     * @param {Function} fn        The method the event invokes
+     * @param {Object} scope       (optional) The scope (this object) of the fn
+     * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
+     * @method
+     */
+    </span><span class="jsdoc-var">ep.on </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ep.addListener</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-comment">// backwards compat
+    </span><span class="jsdoc-var">ep.mon </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ep.addListener</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">/**
+     * Removes an event handler from this element (shorthand for removeListener)
+     * @param {String} eventName the type of event to remove
+     * @param {Function} fn the method the event invokes
+     * @return {Roo.Element} this
+     * @method
+     */
+    </span><span class="jsdoc-var">ep.un </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ep.removeListener</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">/**
+     * true to automatically adjust width and height settings for box-model issues (default to true)
+     */
+    </span><span class="jsdoc-var">ep.autoBoxAdjust </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">El.unitPattern </span><span class="jsdoc-syntax">= /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">El.addUnits </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultUnit</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">&quot;&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;number&quot; </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">El.unitPattern.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">defaultUnit </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-comment">// special markup used throughout Roo when box wrapping elements
+    </span><span class="jsdoc-var">El.boxMarkup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;div class=&quot;{0}-tl&quot;&gt;&lt;div class=&quot;{0}-tr&quot;&gt;&lt;div class=&quot;{0}-tc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-ml&quot;&gt;&lt;div class=&quot;{0}-mr&quot;&gt;&lt;div class=&quot;{0}-mc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-bl&quot;&gt;&lt;div class=&quot;{0}-br&quot;&gt;&lt;div class=&quot;{0}-bc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-comment">/**
+     * Visibility mode constant - Use visibility to hide element
+     * @static
+     * @type Number
+     */
+    </span><span class="jsdoc-var">El.VISIBILITY </span><span class="jsdoc-syntax">= 1;
+    </span><span class="jsdoc-comment">/**
+     * Visibility mode constant - Use display to hide element
+     * @static
+     * @type Number
+     */
+    </span><span class="jsdoc-var">El.DISPLAY </span><span class="jsdoc-syntax">= 2;
+
+    </span><span class="jsdoc-var">El.borders </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;border-left-width&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;border-right-width&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;border-top-width&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;border-bottom-width&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-var">El.paddings </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;padding-left&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;padding-right&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;padding-top&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;padding-bottom&quot;</span><span class="jsdoc-syntax">};
+    </span><span class="jsdoc-var">El.margins </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;margin-left&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;margin-right&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;margin-top&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;margin-bottom&quot;</span><span class="jsdoc-syntax">};
+
+
+
+    </span><span class="jsdoc-comment">/**
+     * @private
+     */
+    </span><span class="jsdoc-var">El.cache </span><span class="jsdoc-syntax">= {};
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">docEl</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">/**
+     * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
+     * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
+     * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
+     * @return {Element} The Element object
+     * @static
+     */
+    </span><span class="jsdoc-var">El.get </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ex</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">elm</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">; }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// element id
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">elm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">))){
+                </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">]){
+                </span><span class="jsdoc-var">ex.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">elm</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">ex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">El</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">elm</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ex</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// dom element
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.id</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]){
+                </span><span class="jsdoc-var">ex.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">ex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">El</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ex</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">El</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">docEl</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.id</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// refresh dom element in case no longer valid,
+                                                              // catch case where it hasn't been appended
+                </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">el.id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// in case it was created directly with Element(), let's cache it
+            </span><span class="jsdoc-syntax">}
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.isComposite</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">El.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">// create a bogus element object representing the document object
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">docEl</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){};
+                </span><span class="jsdoc-var">f.prototype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.prototype</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">docEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">docEl.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">docEl</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">El.uncache </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">){
+        </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">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]){
+                </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]];
+            }
+        }
+    };
+
+    </span><span class="jsdoc-comment">// private
+    // Garbage collection - uncache elements/purge listeners on orphaned elements
+    // so we don't hold a reference and cause the browser to retain them
+    </span><span class="jsdoc-var">El.garbageCollect </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.enableGarbageCollector</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">clearInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">El.collectorThread</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">eid </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">eid</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// -------------------------------------------------------
+            // Determining what is garbage:
+            // -------------------------------------------------------
+            // !d
+            // dom node is null, definitely garbage
+            // -------------------------------------------------------
+            // !d.parentNode
+            // no parentNode == direct orphan, definitely garbage
+            // -------------------------------------------------------
+            // !d.offsetParent &amp;&amp; !document.getElementById(eid)
+            // display none elements have no offsetParent so we will
+            // also try to look it up by it's id. However, check
+            // offsetParent first so we don't do unneeded lookups.
+            // This enables collection of elements that are not orphans
+            // directly, but somewhere up the line they have an orphan
+            // parent.
+            // -------------------------------------------------------
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">d.parentNode </span><span class="jsdoc-syntax">|| (!</span><span class="jsdoc-var">d.offsetParent </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eid</span><span class="jsdoc-syntax">))){
+                </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">eid</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.enableListenerCollection</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">E.purgeElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
+                }
+            }
+        }
+    }
+    </span><span class="jsdoc-var">El.collectorThreadId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">El.garbageCollect</span><span class="jsdoc-syntax">, 30000);
+
+
+    </span><span class="jsdoc-comment">// dom is optional
+    </span><span class="jsdoc-var">El.Flyweight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dom</span><span class="jsdoc-syntax">;
+    };
+    </span><span class="jsdoc-var">El.Flyweight.prototype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.prototype</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-var">El._flyweights </span><span class="jsdoc-syntax">= {};
+    </span><span class="jsdoc-comment">/**
+     * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
+     * the dom node can be overwritten by other code.
+     * @param {String/HTMLElement} el The dom node or id
+     * @param {String} named (optional) Allows for creation of named reusable flyweights to
+     *                                  prevent conflicts (e.g. internally Roo uses &quot;_internal&quot;)
+     * @static
+     * @return {Element} The shared Element object
+     */
+    </span><span class="jsdoc-var">El.fly </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">, </span><span class="jsdoc-var">named</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">named </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">named </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'_global'</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">El._flyweights</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">named</span><span class="jsdoc-syntax">]){
+            </span><span class="jsdoc-var">El._flyweights</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">named</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">El.Flyweight</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">El._flyweights</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">named</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">El._flyweights</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">named</span><span class="jsdoc-syntax">];
+    };
+
+    </span><span class="jsdoc-comment">/**
+     * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
+     * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
+     * Shorthand of {@link Roo.Element#get}
+     * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
+     * @return {Element} The Element object
+     * @member Roo
+     * @method get
+     */
+    </span><span class="jsdoc-var">Roo.get </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.get</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-comment">/**
+     * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
+     * the dom node can be overwritten by other code.
+     * Shorthand of {@link Roo.Element#fly}
+     * @param {String/HTMLElement} el The dom node or id
+     * @param {String} named (optional) Allows for creation of named reusable flyweights to
+     *                                  prevent conflicts (e.g. internally Roo uses &quot;_internal&quot;)
+     * @static
+     * @return {Element} The shared Element object
+     * @member Roo
+     * @method fly
+     */
+    </span><span class="jsdoc-var">Roo.fly </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">El.fly</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-comment">// speedy lookup for elements never to box adjust
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">noBoxAdjust </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isStrict </span><span class="jsdoc-syntax">? {
+        </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">:1
+    } : {
+        </span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">:1, </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">:1, </span><span class="jsdoc-var">textarea</span><span class="jsdoc-syntax">:1
+    };
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">noBoxAdjust</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">] = 1;
+    }
+
+
+    </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'unload'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">El.cache</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">El._flyweights</span><span class="jsdoc-syntax">;
+    });
+})();
+
+
+
+
+</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.DomQuery</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.Element.selectorFunction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomQuery.select</span><span class="jsdoc-syntax">;
+}
+
+</span><span class="jsdoc-var">Roo.Element.select </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unique</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">selector </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Element.selectorFunction</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">root</span><span class="jsdoc-syntax">);
+    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector.length </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">;
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Invalid selector&quot;</span><span class="jsdoc-syntax">;
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">unique </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.CompositeElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.CompositeElementLite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-comment">/**
+ * Selects elements based on the passed CSS selector to enable working on them as 1.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Roo
+ * @method select
+ */
+</span><span class="jsdoc-var">Roo.select </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Element.select</span><span class="jsdoc-syntax">;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_EventManager.js.html b/docs/symbols/src/Roo_EventManager.js.html
new file mode 100644 (file)
index 0000000..4263ec3
--- /dev/null
@@ -0,0 +1,836 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/EventManager.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.EventManager
+ * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides 
+ * several useful events directly.
+ * See {@link Roo.EventObject} for more details on normalized event objects.
+ * @singleton
+ */
+</span><span class="jsdoc-var">Roo.EventManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">docReadyEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">docReadyProcId</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">docReadyState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">resizeEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">resizeTask</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">textEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">textSize</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">E </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Event</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">D </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom</span><span class="jsdoc-syntax">;
+
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fireDocReady </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">docReadyState</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">docReadyState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">Roo.isReady </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">docReadyProcId</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">clearInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">docReadyProcId</span><span class="jsdoc-syntax">);
+            }
+            </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-var">Roo.isOpera</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">document.removeEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;DOMContentLoaded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fireDocReady</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">defer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;ie-deferred-loader&quot;</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">defer</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">defer.onreadystatechange </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">defer.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">defer</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">docReadyEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">docReadyEvent.fire</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">docReadyEvent.clearListeners</span><span class="jsdoc-syntax">();
+            }
+        }
+    };
+    
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">initDocReady </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">docReadyEvent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.Event</span><span class="jsdoc-syntax">();
+        </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-var">Roo.isOpera</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">document.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;DOMContentLoaded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fireDocReady</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">document.write</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&lt;s&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'cript id=&quot;ie-deferred-loader&quot; defer=&quot;defer&quot; src=&quot;/'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'/:&quot;&gt;&lt;/s'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;cript&gt;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">defer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;ie-deferred-loader&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">defer.onreadystatechange </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.readyState </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;complete&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">fireDocReady</span><span class="jsdoc-syntax">();
+                }
+            };
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isSafari</span><span class="jsdoc-syntax">){ 
+            </span><span class="jsdoc-var">docReadyProcId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.readyState</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;complete&quot;</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">fireDocReady</span><span class="jsdoc-syntax">();     
+                 }
+            }, 10);
+        }
+        </span><span class="jsdoc-comment">// no matter what, make sure it fires on load
+        </span><span class="jsdoc-var">E.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;load&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fireDocReady</span><span class="jsdoc-syntax">);
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createBuffered </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">task </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">h</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">// create new event object impl so new events don't wipe out properties
+            </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.EventObjectImpl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">task.delay</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.buffer</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]);
+        };
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createSingle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.EventManager.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        };
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createDelayed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">// create new event object impl so new events don't wipe out properties
+            </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.EventObjectImpl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">o.delay </span><span class="jsdoc-syntax">|| 10);
+        };
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">listen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= (!</span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;boolean&quot;</span><span class="jsdoc-syntax">) ? {} : </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.fn</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.scope</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Error listening for \&quot;&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ename </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'\&quot;. Element &quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">element </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot; doesn\'t exist.'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </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">){
+            </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.EventObject.setEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.delegate</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.delegate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.target</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.stopEvent </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.preventDefault </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.stopPropagation </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
+            }
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.normalized </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.browserEvent</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+        };
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.delay</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createDelayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.single</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createSingle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.buffer</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createBuffered</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">fn._handlers </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn._handlers </span><span class="jsdoc-syntax">|| [];
+        </span><span class="jsdoc-var">fn._handlers.push</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">]);
+
+        </span><span class="jsdoc-var">E.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ename </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;mousewheel&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">el.addEventListener</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// workaround for jQuery
+            </span><span class="jsdoc-var">el.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;DOMMouseScroll&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">E.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'unload'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.removeEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;DOMMouseScroll&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            });
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ename </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;mousedown&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// fix stopped mousedowns on the document
+            </span><span class="jsdoc-var">Roo.EventManager.stoppedMouseDownEvent.addListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stopListening </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">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">hds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn._handlers</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hds</span><span class="jsdoc-syntax">){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hds.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hds</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">[0] == </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">[1] == </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">hd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">[2];
+                    </span><span class="jsdoc-var">hds.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, 1);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                }
+            }
+        }
+        </span><span class="jsdoc-var">E.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hd</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ename </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;mousewheel&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">el.addEventListener</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">el.removeEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;DOMMouseScroll&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ename </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;mousedown&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// fix stopped mousedowns on the document
+            </span><span class="jsdoc-var">Roo.EventManager.stoppedMouseDownEvent.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hd</span><span class="jsdoc-syntax">);
+        }
+    };
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">propRe </span><span class="jsdoc-syntax">= /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
+    
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pub </span><span class="jsdoc-syntax">= {
+        
+        
+        </span><span class="jsdoc-comment">/** 
+         * Fix for doc tools
+         * @scope Roo.EventManager
+         */
+        
+        
+        /** 
+         * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
+         * object with a Roo.EventObject
+         * @param {Function} fn        The method the event invokes
+         * @param {Object}   scope    An object that becomes the scope of the handler
+         * @param {boolean}  override If true, the obj passed in becomes
+         *                             the execution scope of the listener
+         * @return {Function} The wrapped function
+         * @deprecated
+         */
+        </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">override</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">Roo.EventObject.setEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">override </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.EventObject</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">);
+            };
+        },
+        
+        </span><span class="jsdoc-comment">/**
+     * Appends an event handler to an element (shorthand for addListener)
+     * @param {String/HTMLElement}   element        The html element or id to assign the
+     * @param {String}   eventName The type of event to listen for
+     * @param {Function} handler The method the event invokes
+     * @param {Object}   scope (optional) The scope in which to execute the handler
+     * function. The handler function's &quot;this&quot; context.
+     * @param {Object}   options (optional) An object containing handler configuration
+     * properties. This may contain any of the following properties:&lt;ul&gt;
+     * &lt;li&gt;scope {Object} The scope in which to execute the handler function. The handler function's &quot;this&quot; context.&lt;/li&gt;
+     * &lt;li&gt;delegate {String} A simple selector to filter the target or look for a descendant of the target&lt;/li&gt;
+     * &lt;li&gt;stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.&lt;/li&gt;
+     * &lt;li&gt;preventDefault {Boolean} True to prevent the default action&lt;/li&gt;
+     * &lt;li&gt;stopPropagation {Boolean} True to prevent event propagation&lt;/li&gt;
+     * &lt;li&gt;normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject&lt;/li&gt;
+     * &lt;li&gt;delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.&lt;/li&gt;
+     * &lt;li&gt;single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.&lt;/li&gt;
+     * &lt;li&gt;buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
+     * by the specified number of milliseconds. If the event fires again within that time, the original
+     * handler is &lt;em&gt;not&lt;/em&gt; invoked, but the new handler is scheduled in its place.&lt;/li&gt;
+     * &lt;/ul&gt;&lt;br&gt;
+     * &lt;p&gt;
+     * &lt;b&gt;Combining Options&lt;/b&gt;&lt;br&gt;
+     * Using the options argument, it is possible to combine different types of listeners:&lt;br&gt;
+     * &lt;br&gt;
+     * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)&lt;div style=&quot;margin: 5px 20px 20px;&quot;&gt;
+     * Code:&lt;pre&gt;&lt;code&gt;
+el.on('click', this.onClick, this, {
+    single: true,
+    delay: 100,
+    stopEvent : true,
+    forumId: 4
+});&lt;/code&gt;&lt;/pre&gt;
+     * &lt;p&gt;
+     * &lt;b&gt;Attaching multiple handlers in 1 call&lt;/b&gt;&lt;br&gt;
+      * The method also allows for a single argument to be passed which is a config object containing properties
+     * which specify multiple handlers.
+     * &lt;p&gt;
+     * Code:&lt;pre&gt;&lt;code&gt;
+el.on({
+    'click' : {
+        fn: this.onClick
+        scope: this,
+        delay: 100
+    },
+    'mouseover' : {
+        fn: this.onMouseOver
+        scope: this
+    },
+    'mouseout' : {
+        fn: this.onMouseOut
+        scope: this
+    }
+});&lt;/code&gt;&lt;/pre&gt;
+     * &lt;p&gt;
+     * Or a shorthand syntax:&lt;br&gt;
+     * Code:&lt;pre&gt;&lt;code&gt;
+el.on({
+    'click' : this.onClick,
+    'mouseover' : this.onMouseOver,
+    'mouseout' : this.onMouseOut
+    scope: this
+});&lt;/code&gt;&lt;/pre&gt;
+     */
+        </span><span class="jsdoc-var">addListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">eventName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">propRe.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)){
+                        </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-comment">// shared options
+                        </span><span class="jsdoc-var">listen</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">o.scope</span><span class="jsdoc-syntax">);
+                    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                        </span><span class="jsdoc-comment">// individual options
+                        </span><span class="jsdoc-var">listen</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]);
+                    }
+                }
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">listen</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">);
+        },
+        
+        </span><span class="jsdoc-comment">/**
+         * Removes an event handler
+         *
+         * @param {String/HTMLElement}   element        The id or html element to remove the 
+         *                             event from
+         * @param {String}   eventName     The type of event
+         * @param {Function} fn
+         * @return {Boolean} True if a listener was actually removed
+         */
+        </span><span class="jsdoc-var">removeListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">stopListening</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">element</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+        },
+        
+        </span><span class="jsdoc-comment">/**
+         * Fires when the document is ready (before onload and before images are loaded). Can be 
+         * accessed shorthanded Roo.onReady().
+         * @param {Function} fn        The method the event invokes
+         * @param {Object}   scope    An  object that becomes the scope of the handler
+         * @param {boolean}  options
+         */
+        </span><span class="jsdoc-var">onDocumentReady </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">docReadyState</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// if it already fired
+                </span><span class="jsdoc-var">docReadyEvent.addListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">docReadyEvent.fire</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">docReadyEvent.clearListeners</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">docReadyEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">initDocReady</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-var">docReadyEvent.addListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">);
+        },
+        
+        </span><span class="jsdoc-comment">/**
+         * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
+         * @param {Function} fn        The method the event invokes
+         * @param {Object}   scope    An object that becomes the scope of the handler
+         * @param {boolean}  options
+         */
+        </span><span class="jsdoc-var">onWindowResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">resizeEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">resizeEvent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.Event</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">resizeTask </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-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">resizeEvent.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">D.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">D.getViewHeight</span><span class="jsdoc-syntax">());
+                });
+                </span><span class="jsdoc-var">E.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">resizeTask.delay</span><span class="jsdoc-syntax">(50);
+                    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                        </span><span class="jsdoc-var">resizeEvent.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">D.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">D.getViewHeight</span><span class="jsdoc-syntax">());
+                    }
+                });
+            }
+            </span><span class="jsdoc-var">resizeEvent.addListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
+         * @param {Function} fn        The method the event invokes
+         * @param {Object}   scope    An object that becomes the scope of the handler
+         * @param {boolean}  options
+         */
+        </span><span class="jsdoc-var">onTextResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">textEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">textEvent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.Event</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">textEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-var">textEl.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'x-text-resize'</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">textEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'X'</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">textEl.appendTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">textSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">textEl.dom.offsetHeight</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">textEl.dom.offsetHeight </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">textSize</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">textEvent.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">textSize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">textSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">textEl.dom.offsetHeight</span><span class="jsdoc-syntax">);
+                    }
+                }, </span><span class="jsdoc-var">this.textResizeInterval</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">textEvent.addListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Removes the passed window resize listener.
+         * @param {Function} fn        The method the event invokes
+         * @param {Object}   scope    The scope of handler
+         */
+        </span><span class="jsdoc-var">removeResizeListener </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">resizeEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">resizeEvent.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">);
+            }
+        },
+
+        </span><span class="jsdoc-comment">// private
+        </span><span class="jsdoc-var">fireResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">resizeEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">resizeEvent.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">D.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">D.getViewHeight</span><span class="jsdoc-syntax">());
+            }   
+        },
+        </span><span class="jsdoc-comment">/**
+         * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
+         */
+        </span><span class="jsdoc-var">ieDeferSrc </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * The frequency, in milliseconds, to check for text resize events (defaults to 50)
+         */
+        </span><span class="jsdoc-var">textResizeInterval </span><span class="jsdoc-syntax">: 50
+    };
+    
+    </span><span class="jsdoc-comment">/**
+     * Fix for doc tools
+     * @scopeAlias pub=Roo.EventManager
+     */
+    
+     /**
+     * Appends an event handler to an element (shorthand for addListener)
+     * @param {String/HTMLElement}   element        The html element or id to assign the
+     * @param {String}   eventName The type of event to listen for
+     * @param {Function} handler The method the event invokes
+     * @param {Object}   scope (optional) The scope in which to execute the handler
+     * function. The handler function's &quot;this&quot; context.
+     * @param {Object}   options (optional) An object containing handler configuration
+     * properties. This may contain any of the following properties:&lt;ul&gt;
+     * &lt;li&gt;scope {Object} The scope in which to execute the handler function. The handler function's &quot;this&quot; context.&lt;/li&gt;
+     * &lt;li&gt;delegate {String} A simple selector to filter the target or look for a descendant of the target&lt;/li&gt;
+     * &lt;li&gt;stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.&lt;/li&gt;
+     * &lt;li&gt;preventDefault {Boolean} True to prevent the default action&lt;/li&gt;
+     * &lt;li&gt;stopPropagation {Boolean} True to prevent event propagation&lt;/li&gt;
+     * &lt;li&gt;normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject&lt;/li&gt;
+     * &lt;li&gt;delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.&lt;/li&gt;
+     * &lt;li&gt;single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.&lt;/li&gt;
+     * &lt;li&gt;buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
+     * by the specified number of milliseconds. If the event fires again within that time, the original
+     * handler is &lt;em&gt;not&lt;/em&gt; invoked, but the new handler is scheduled in its place.&lt;/li&gt;
+     * &lt;/ul&gt;&lt;br&gt;
+     * &lt;p&gt;
+     * &lt;b&gt;Combining Options&lt;/b&gt;&lt;br&gt;
+     * Using the options argument, it is possible to combine different types of listeners:&lt;br&gt;
+     * &lt;br&gt;
+     * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)&lt;div style=&quot;margin: 5px 20px 20px;&quot;&gt;
+     * Code:&lt;pre&gt;&lt;code&gt;
+el.on('click', this.onClick, this, {
+    single: true,
+    delay: 100,
+    stopEvent : true,
+    forumId: 4
+});&lt;/code&gt;&lt;/pre&gt;
+     * &lt;p&gt;
+     * &lt;b&gt;Attaching multiple handlers in 1 call&lt;/b&gt;&lt;br&gt;
+      * The method also allows for a single argument to be passed which is a config object containing properties
+     * which specify multiple handlers.
+     * &lt;p&gt;
+     * Code:&lt;pre&gt;&lt;code&gt;
+el.on({
+    'click' : {
+        fn: this.onClick
+        scope: this,
+        delay: 100
+    },
+    'mouseover' : {
+        fn: this.onMouseOver
+        scope: this
+    },
+    'mouseout' : {
+        fn: this.onMouseOut
+        scope: this
+    }
+});&lt;/code&gt;&lt;/pre&gt;
+     * &lt;p&gt;
+     * Or a shorthand syntax:&lt;br&gt;
+     * Code:&lt;pre&gt;&lt;code&gt;
+el.on({
+    'click' : this.onClick,
+    'mouseover' : this.onMouseOver,
+    'mouseout' : this.onMouseOut
+    scope: this
+});&lt;/code&gt;&lt;/pre&gt;
+     */
+    </span><span class="jsdoc-var">pub.on </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pub.addListener</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">pub.un </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pub.removeListener</span><span class="jsdoc-syntax">;
+
+    </span><span class="jsdoc-var">pub.stoppedMouseDownEvent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.Event</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pub</span><span class="jsdoc-syntax">;
+}();
+</span><span class="jsdoc-comment">/**
+  * Fires when the document is ready (before onload and before images are loaded).  Shorthand of {@link Roo.EventManager#onDocumentReady}.
+  * @param {Function} fn        The method the event invokes
+  * @param {Object}   scope    An  object that becomes the scope of the handler
+  * @param {boolean}  override If true, the obj passed in becomes
+  *                             the execution scope of the listener
+  * @member Roo
+  * @method onReady
+ */
+</span><span class="jsdoc-var">Roo.onReady </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.EventManager.onDocumentReady</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-var">Roo.onReady</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bd </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-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">bd</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; }
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= [
+            </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;roo-ie&quot;
+            </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.isGecko </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;roo-gecko&quot;
+            </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.isOpera </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;roo-opera&quot;
+            </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;roo-safari&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">];
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isMac</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">cls.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;roo-mac&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isLinux</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">cls.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;roo-linux&quot;</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isBorderBox</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">cls.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'roo-border-box'</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isStrict</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// add to the parent to allow for selectors like &quot;.ext-strict .ext-ie&quot;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">bd.dom.parentNode</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">p.className </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' roo-strict'</span><span class="jsdoc-syntax">;
+        }
+    }
+    </span><span class="jsdoc-var">bd.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cls.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">));
+});
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.EventObject
+ * EventObject exposes the Yahoo! UI Event functionality directly on the object
+ * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code 
+ * Example:
+ * &lt;pre&gt;&lt;code&gt;
+ function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
+    e.preventDefault();
+    var target = e.getTarget();
+    ...
+ }
+ var myDiv = Roo.get(&quot;myDiv&quot;);
+ myDiv.on(&quot;click&quot;, handleClick);
+ //or
+ Roo.EventManager.on(&quot;myDiv&quot;, 'click', handleClick);
+ Roo.EventManager.addListener(&quot;myDiv&quot;, 'click', handleClick);
+ &lt;/code&gt;&lt;/pre&gt;
+ * @singleton
+ */
+</span><span class="jsdoc-var">Roo.EventObject </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+    
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">E </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Event</span><span class="jsdoc-syntax">;
+    
+    </span><span class="jsdoc-comment">// safari keypress events for special keys return bad keycodes
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">safariKeys </span><span class="jsdoc-syntax">= {
+        63234 : 37, </span><span class="jsdoc-comment">// left
+        </span><span class="jsdoc-syntax">63235 : 39, </span><span class="jsdoc-comment">// right
+        </span><span class="jsdoc-syntax">63232 : 38, </span><span class="jsdoc-comment">// up
+        </span><span class="jsdoc-syntax">63233 : 40, </span><span class="jsdoc-comment">// down
+        </span><span class="jsdoc-syntax">63276 : 33, </span><span class="jsdoc-comment">// page up
+        </span><span class="jsdoc-syntax">63277 : 34, </span><span class="jsdoc-comment">// page down
+        </span><span class="jsdoc-syntax">63272 : 46, </span><span class="jsdoc-comment">// delete
+        </span><span class="jsdoc-syntax">63273 : 36, </span><span class="jsdoc-comment">// home
+        </span><span class="jsdoc-syntax">63275 : 35  </span><span class="jsdoc-comment">// end
+    </span><span class="jsdoc-syntax">};
+
+    </span><span class="jsdoc-comment">// normalize button clicks
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btnMap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? {1:0,4:1,2:2} :
+                (</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">? {1:0,2:1,3:2} : {0:0,1:1,2:2});
+
+    </span><span class="jsdoc-var">Roo.EventObjectImpl </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }
+    };
+    </span><span class="jsdoc-var">Roo.EventObjectImpl.prototype </span><span class="jsdoc-syntax">= {
+        </span><span class="jsdoc-comment">/**
+         * Used to fix doc tools.
+         * @scope Roo.EventObject.prototype
+         */
+            
+
+        
+        
+        /** The normal browser event */
+        </span><span class="jsdoc-var">browserEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** The button pressed in a mouse event */
+        </span><span class="jsdoc-var">button </span><span class="jsdoc-syntax">: -1,
+        </span><span class="jsdoc-comment">/** True if the shift key was down during the event */
+        </span><span class="jsdoc-var">shiftKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** True if the control key was down during the event */
+        </span><span class="jsdoc-var">ctrlKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/** True if the alt key was down during the event */
+        </span><span class="jsdoc-var">altKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">BACKSPACE </span><span class="jsdoc-syntax">: 8,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">TAB </span><span class="jsdoc-syntax">: 9,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">RETURN </span><span class="jsdoc-syntax">: 13,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">ENTER </span><span class="jsdoc-syntax">: 13,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">SHIFT </span><span class="jsdoc-syntax">: 16,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">CONTROL </span><span class="jsdoc-syntax">: 17,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">ESC </span><span class="jsdoc-syntax">: 27,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">SPACE </span><span class="jsdoc-syntax">: 32,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">PAGEUP </span><span class="jsdoc-syntax">: 33,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">PAGEDOWN </span><span class="jsdoc-syntax">: 34,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">END </span><span class="jsdoc-syntax">: 35,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">HOME </span><span class="jsdoc-syntax">: 36,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">LEFT </span><span class="jsdoc-syntax">: 37,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">UP </span><span class="jsdoc-syntax">: 38,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">RIGHT </span><span class="jsdoc-syntax">: 39,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">DOWN </span><span class="jsdoc-syntax">: 40,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">DELETE </span><span class="jsdoc-syntax">: 46,
+        </span><span class="jsdoc-comment">/** Key constant 
+        * @type Number */
+        </span><span class="jsdoc-var">F5 </span><span class="jsdoc-syntax">: 116,
+
+           </span><span class="jsdoc-comment">/** @private */
+        </span><span class="jsdoc-var">setEvent </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">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.browserEvent</span><span class="jsdoc-syntax">)){ </span><span class="jsdoc-comment">// already wrapped
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.browserEvent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-comment">// normalize buttons
+                </span><span class="jsdoc-var">this.button </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">btnMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e.button</span><span class="jsdoc-syntax">] : (</span><span class="jsdoc-var">e.which </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.which</span><span class="jsdoc-syntax">-1 : -1);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'click' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.button </span><span class="jsdoc-syntax">== -1){
+                    </span><span class="jsdoc-var">this.button </span><span class="jsdoc-syntax">= 0;
+                }
+                </span><span class="jsdoc-var">this.type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.type</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.shiftKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.shiftKey</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-comment">// mac metaKey behaves like ctrlKey
+                </span><span class="jsdoc-var">this.ctrlKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.ctrlKey </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.metaKey</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.altKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.altKey</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-comment">// in getKey these will be normalized for the mac
+                </span><span class="jsdoc-var">this.keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.keyCode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-comment">// keyup warnings on firefox.
+                </span><span class="jsdoc-var">this.charCode </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">e.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'keyup' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'keydown'</span><span class="jsdoc-syntax">) ? 0 : </span><span class="jsdoc-var">e.charCode</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-comment">// cache the target for the delayed and or buffered events
+                </span><span class="jsdoc-var">this.target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">E.getTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-comment">// same for XY
+                </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">E.getXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.button </span><span class="jsdoc-syntax">= -1;
+                </span><span class="jsdoc-var">this.shiftKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.ctrlKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.altKey </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.keyCode </span><span class="jsdoc-syntax">= 0;
+                </span><span class="jsdoc-var">this.charCode </span><span class="jsdoc-syntax">=0;
+                </span><span class="jsdoc-var">this.target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">= [0, 0];
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Stop the event (preventDefault and stopPropagation)
+         */
+        </span><span class="jsdoc-var">stopEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">Roo.EventManager.stoppedMouseDownEvent.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-var">E.stopEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">);
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Prevents the browsers default handling of the event.
+         */
+        </span><span class="jsdoc-var">preventDefault </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">E.preventDefault</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">);
+            }
+        },
+
+        </span><span class="jsdoc-comment">/** @private */
+        </span><span class="jsdoc-var">isNavKeyPress </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyCode</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">safariKeys</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">] || </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 33 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 40) || </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.RETURN </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.TAB </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.ESC</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-var">isSpecialKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyCode</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'keypress' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.ctrlKey</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 9 || </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 13  || </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 40 || </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 27 ||
+            (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 16) || (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 17) ||
+            (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 18 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 20) ||
+            (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 33 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 35) ||
+            (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 36 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 39) ||
+            (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 44 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 45);
+        },
+        </span><span class="jsdoc-comment">/**
+         * Cancels bubbling of the event.
+         */
+        </span><span class="jsdoc-var">stopPropagation </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">Roo.EventManager.stoppedMouseDownEvent.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-var">E.stopPropagation</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">);
+            }
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the key code for the event.
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getCharCode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.charCode </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.keyCode</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns a normalized keyCode for the event.
+         * @return {Number} The key code
+         */
+        </span><span class="jsdoc-var">getKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyCode </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.charCode</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">safariKeys</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">] || </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the x coordinate of the event.
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getPageX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the y coordinate of the event.
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getPageY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1];
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the time of the event.
+         * @return {Number}
+         */
+        </span><span class="jsdoc-var">getTime </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">E.getTime</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the page coordinates of the event.
+         * @return {Array} The xy values like [x, y]
+         */
+        </span><span class="jsdoc-var">getXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Gets the target for the event.
+         * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
+         * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
+                search as a number or element (defaults to 10 || document.body)
+         * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
+         * @return {HTMLelement}
+         */
+        </span><span class="jsdoc-var">getTarget </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">selector </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.target</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxDepth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.target</span><span class="jsdoc-syntax">;
+        },
+        </span><span class="jsdoc-comment">/**
+         * Gets the related target.
+         * @return {HTMLElement}
+         */
+        </span><span class="jsdoc-var">getRelatedTarget </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">E.getRelatedTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Normalizes mouse wheel delta across browsers
+         * @return {Number} The delta
+         */
+        </span><span class="jsdoc-var">getWheelDelta </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.browserEvent</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">delta </span><span class="jsdoc-syntax">= 0;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.wheelDelta</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">/* IE/Opera. */
+                </span><span class="jsdoc-var">delta </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.wheelDelta</span><span class="jsdoc-syntax">/120;
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.detail</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">/* Mozilla case. */
+                </span><span class="jsdoc-var">delta </span><span class="jsdoc-syntax">= -</span><span class="jsdoc-var">e.detail</span><span class="jsdoc-syntax">/3;
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">delta</span><span class="jsdoc-syntax">;
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if the control, meta, shift or alt key was pressed during this event.
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">hasModifier </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!!((</span><span class="jsdoc-var">this.ctrlKey </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.altKey</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">this.shiftKey</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-comment">/**
+         * Returns true if the target of this event equals el or is a child of el
+         * @param {String/HTMLElement/Element} el
+         * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
+         * @return {Boolean}
+         */
+        </span><span class="jsdoc-var">within </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">, </span><span class="jsdoc-var">related</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">related </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;getRelatedTarget&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;getTarget&quot;</span><span class="jsdoc-syntax">]();
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
+        },
+
+        </span><span class="jsdoc-var">getPoint </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.lib.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">this.xy</span><span class="jsdoc-syntax">[1]);
+        }
+    };
+
+    </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.EventObjectImpl</span><span class="jsdoc-syntax">();
+}();
+            
+    </span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Fx.js.html b/docs/symbols/src/Roo_Fx.js.html
new file mode 100644 (file)
index 0000000..8a05745
--- /dev/null
@@ -0,0 +1,1004 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Fx.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+
+
+//Notifies Element that fx methods are available
+</span><span class="jsdoc-var">Roo.enableFx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.Fx
+ * &lt;p&gt;A class to provide basic animation and visual effects support.  &lt;b&gt;Note:&lt;/b&gt; This class is automatically applied
+ * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
+ * Conversely, since the effects are not actually defined in Element, Roo.Fx &lt;b&gt;must&lt;/b&gt; be included in order for the 
+ * Element effects to work.&lt;/p&gt;&lt;br/&gt;
+ *
+ * &lt;p&gt;It is important to note that although the Fx methods and many non-Fx Element methods support &quot;method chaining&quot; in that
+ * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
+ * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
+ * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
+ * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
+ * expected results and should be done with care.&lt;/p&gt;&lt;br/&gt;
+ *
+ * &lt;p&gt;Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
+ * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:&lt;/p&gt;
+&lt;pre&gt;
+Value  Description
+-----  -----------------------------
+tl     The top left corner
+t      The center of the top edge
+tr     The top right corner
+l      The center of the left edge
+r      The center of the right edge
+bl     The bottom left corner
+b      The center of the bottom edge
+br     The bottom right corner
+&lt;/pre&gt;
+ * &lt;b&gt;Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
+ * below are common options that can be passed to any Fx method.&lt;/b&gt;
+ * @cfg {Function} callback A function called when the effect is finished
+ * @cfg {Object} scope The scope of the effect function
+ * @cfg {String} easing A valid Easing value for the effect
+ * @cfg {String} afterCls A css class to apply after the effect
+ * @cfg {Number} duration The length of time (in seconds) that the effect should last
+ * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
+ * @cfg {Boolean} useDisplay Whether to use the &lt;i&gt;display&lt;/i&gt; CSS property instead of &lt;i&gt;visibility&lt;/i&gt; when hiding Elements (only applies to 
+ * effects that end with the element being visually hidden, ignored otherwise)
+ * @cfg {String/Object/Function} afterStyle A style specification string, e.g. &quot;width:100px&quot;, or an object in the form {width:&quot;100px&quot;}, or
+ * a function which returns such a specification that will be applied to the Element after the effect finishes
+ * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
+ * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
+ * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
+ */
+</span><span class="jsdoc-var">Roo.Fx </span><span class="jsdoc-syntax">= {
+       </span><span class="jsdoc-comment">/**
+        * Slides the element into view.  An anchor point can be optionally passed to set the point of
+        * origin for the slide effect.  This function automatically handles wrapping the element with
+        * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+    easing: 'easeOut',
+    duration: .5
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </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">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+
+            </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-comment">// fix display to visibility
+            </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-comment">// fixed size for slide
+            </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-comment">// wrap if needed
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxWrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">st.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">st.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-comment">// clear out temp styles after slide and unwrap
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.fxUnwrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+            </span><span class="jsdoc-comment">// time to calc the positions
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">]}, </span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">bh </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">};
+
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, 0);
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">wrap.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, 0);
+                    </span><span class="jsdoc-var">wrap.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </span><span class="jsdoc-var">wrap.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </span><span class="jsdoc-var">wrap.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]);
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </span><span class="jsdoc-var">wrap.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">wrap.show</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    
+       </span><span class="jsdoc-comment">/**
+        * Slides the element out of view.  An anchor point can be optionally passed to set the end point
+        * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
+        * 'hidden') but block elements will still take up space in the document.  The element must be removed
+        * from the DOM using the 'remove' config option if desired.  This function automatically handles 
+        * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">slideOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+
+            </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-comment">// fixed size for slide
+            </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-comment">// wrap if needed
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxWrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">st.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">st.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.fxUnwrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">zero </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: 0};
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
+        * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. 
+        * The element must be removed from the DOM using the 'remove' config option if desired.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">puff </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.fontSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">* 2)},
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">* 2)},
+                    </span><span class="jsdoc-var">points </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">by</span><span class="jsdoc-syntax">: [-(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5), -(</span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5)]},
+                    </span><span class="jsdoc-var">opacity </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: 0},
+                    </span><span class="jsdoc-var">fontSize</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:200, </span><span class="jsdoc-var">unit</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;%&quot;</span><span class="jsdoc-syntax">}
+                },
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
+        * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
+        * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+    easing: 'easeIn',
+    duration: .3,
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">switchOff </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.clip</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:0.3}}, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">1, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+                (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({
+                        </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:1},
+                        </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">by</span><span class="jsdoc-syntax">:[0, </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">() * </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5]}
+                    }, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">, 0.3, </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+                })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Highlights the Element by setting a color (applies to the background-color by default, but can be
+     * changed using the &quot;attr&quot; config option) and then fading back to the original color. If no original
+     * color is available, you should provide the &quot;endColor&quot; config option which will be cleared after the animation.
+     * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight(&quot;0000ff&quot;, { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight(&quot;ffff9c&quot;, {
+    attr: &quot;background-color&quot;, //can be any valid CSS property (attribute) that supports a color value
+    endColor: (current color) or &quot;ffffff&quot;,
+    easing: 'easeIn',
+    duration: 1
+});
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Roo.Element} The Element
+     */        
+    </span><span class="jsdoc-var">highlight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;ffff9c&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.attr </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;backgroundColor&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">origColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getColor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">restoreColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-var">endColor </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">o.endColor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">origColor</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-string">&quot;ffffff&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">restoreColor</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {};
+            </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = {</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">endColor</span><span class="jsdoc-syntax">};
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'color'</span><span class="jsdoc-syntax">,
+                1,
+                </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame(&quot;ff0000&quot;, 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame(&quot;C3DAF9&quot;, 1, {
+    duration: 1 //duration of entire animation (not each individual ripple)
+    // Note: Easing is not configurable and will be ignored if included
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
+    * @param {Number} count (optional) The number of ripples to display (defaults to 1)
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </span><span class="jsdoc-var">frame </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">count</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;#C3DAF9&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color.length </span><span class="jsdoc-syntax">== 6){
+                </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;#&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">|| 1;
+            </span><span class="jsdoc-var">duration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.duration </span><span class="jsdoc-syntax">|| 1;
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">animFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">proxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createProxy</span><span class="jsdoc-syntax">({
+
+                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:{
+                        </span><span class="jsdoc-var">visbility</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;absolute&quot;</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;35000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// yee haw
+                        </span><span class="jsdoc-var">border</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;0px solid &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">color
+                     </span><span class="jsdoc-syntax">}
+                  });
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isBorderBox </span><span class="jsdoc-syntax">? 2 : 1;
+                </span><span class="jsdoc-var">proxy.animate</span><span class="jsdoc-syntax">({
+                    </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 20},
+                    </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 20},
+                    </span><span class="jsdoc-var">borderWidth</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:10},
+                    </span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:1, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:0},
+                    </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:(</span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ (20*</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">))},
+                    </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:(</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ (20*</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">))}
+                }, </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">proxy.remove</span><span class="jsdoc-syntax">();
+                });
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(--</span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">&gt; 0){
+                     </span><span class="jsdoc-var">animFn.defer</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">/2)*1000, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                }
+            };
+            </span><span class="jsdoc-var">animFn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Creates a pause before any subsequent queued effects begin.  If there are
+    * no effects queued after the pause it will have no effect.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+el.pause(1);
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Number} seconds The length of time to pause (in seconds)
+    * @return {Roo.Element} The Element
+    */
+    </span><span class="jsdoc-var">pause </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">seconds</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">seconds </span><span class="jsdoc-syntax">* 1000);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Fade an element in (from transparent to opaque).  The ending opacity can be specified
+    * using the &quot;endOpacity&quot; config option.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+    easing: 'easeOut',
+    duration: .5
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </span><span class="jsdoc-var">fadeIn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">this.setOpacity</span><span class="jsdoc-syntax">(0);
+            </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.endOpacity </span><span class="jsdoc-syntax">|| 1;
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">}},
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5, </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">== 1){
+                    </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Fade an element out (from opaque to transparent).  The ending opacity can be specified
+    * using the &quot;endOpacity&quot; config option.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+    easing: 'easeOut',
+    duration: .5
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </span><span class="jsdoc-var">fadeOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">o.endOpacity </span><span class="jsdoc-syntax">|| 0}},
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5, </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.visibilityMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">Roo.Element.DISPLAY </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                     </span><span class="jsdoc-var">this.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                     </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Animates the transition of an element's dimensions from a starting height/width
+    * to an ending height/width.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values.  The height and width will default to
+// the element's existing values if passed as null.
+el.scale(
+    [element's width],
+    [element's height], {
+    easing: 'easeOut',
+    duration: .35
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Number} width  The new width (pass undefined to keep the original width)
+    * @param {Number} height  The new height (pass undefined to keep the original height)
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.shift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, {
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h
+        </span><span class="jsdoc-syntax">}));
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
+    * Any of these properties not specified in the config object will not be changed.  This effect 
+    * requires that at least one new dimension, position or opacity setting must be passed in on
+    * the config object in order for the function to have any effect.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+    width: [element's width],
+    height: [element's height],
+    x: [element's x position],
+    y: [element's y position],
+    opacity: [element's opacity],
+    easing: 'easeOut',
+    duration: .35
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Object} options  Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {}, </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.y</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.opacity</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a.width </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">)};
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a.height </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">)};
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a.points </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: [
+                    </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getX</span><span class="jsdoc-syntax">(),
+                    </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getY</span><span class="jsdoc-syntax">()
+                ]};
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a.opacity </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">op</span><span class="jsdoc-syntax">};
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.xy </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">a.points </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">o.xy</span><span class="jsdoc-syntax">};
+            }
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35, </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
+        * ending point of the effect.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+    easing: 'easeOut',
+    duration: .5
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">ghost </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">(),
+                </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: 0}, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {}}, </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.points</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [0, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, 0];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, 0];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [0, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Ensures that all effects queued after syncFx is called on the element are
+        * run concurrently.  This is the opposite of {@link #sequenceFx}.
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">syncFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">|| {}, {
+            </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">concurrent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Ensures that all effects queued after sequenceFx is called on the element are
+        * run in sequence.  This is the opposite of {@link #syncFx}.
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">sequenceFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">|| {}, {
+            </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">concurrent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">nextFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ef </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">[0];
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ef</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ef.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Returns true if the element has any effects actively running or queued, else returns false.
+        * @return {Boolean} True if element has active effects, else false
+        */
+    </span><span class="jsdoc-var">hasActiveFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">[0];
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Stops any running effects and clears the element's internal effects queue if it contains
+        * any additional effects that haven't started yet.
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasActiveFx</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cur </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">[0];
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cur </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">cur.anim </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">cur.anim.isAnimated</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">cur</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-comment">// clear out others
+                </span><span class="jsdoc-var">cur.anim.stop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">beforeFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasActiveFx</span><span class="jsdoc-syntax">() &amp;&amp; !</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.stopFx</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">this.stopFx</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+           }
+           </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Returns true if the element is currently blocking so that no other effect can be queued
+        * until this effect is finished, else returns false if blocking is not set.  This is commonly
+        * used to ensure that an effect initiated by a user action runs to completion prior to the
+        * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
+        * @return {Boolean} True if blocking, else false
+        */
+    </span><span class="jsdoc-var">hasFxBlock </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">[0] &amp;&amp; </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.block</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">queueFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">= [];
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasFxBlock</span><span class="jsdoc-syntax">()){
+            </span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.fxDefaults</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">run </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.beforeFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">fn.block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.block</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.fxQueue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">run</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.nextFx</span><span class="jsdoc-syntax">();
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">fxWrap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">vis</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.wrap </span><span class="jsdoc-syntax">|| !(</span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.wrap</span><span class="jsdoc-syntax">))){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.fixPosition</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">wrapXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">div.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vis</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">wrap.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;static&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">wrap.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.clearPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">wrap.clip</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">wrap.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">wrap.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">fxUnwrap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.clearPositioning</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.wrap</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">wrap.dom.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">wrap.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">wrap.remove</span><span class="jsdoc-syntax">();
+        }
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">getFxRestore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getPositioning</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">st.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">st.height</span><span class="jsdoc-syntax">};
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">afterFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterStyle</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterStyle</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterCls</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterCls</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.remove </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.callback</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.scope</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">]);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fxQueue.shift</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.nextFx</span><span class="jsdoc-syntax">();
+        }
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">getFxEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){ </span><span class="jsdoc-comment">// support for composite element fx
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">fxanim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultDur</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultEase</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">animType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">animType </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'run'</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">|| {};
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Anim</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">](
+            </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">,
+            (</span><span class="jsdoc-var">opt.duration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">defaultDur</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35,
+            (</span><span class="jsdoc-var">opt.easing </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">defaultEase</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            },
+            </span><span class="jsdoc-var">this
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">opt.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
+    }
+};
+
+</span><span class="jsdoc-comment">// backwords compat
+</span><span class="jsdoc-var">Roo.Fx.resize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Fx.scale</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">//When included, Roo.Fx is automatically applied to Element so that all basic
+//effects are available directly via the Element API
+</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Fx</span><span class="jsdoc-syntax">);</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_JsonView.js.html b/docs/symbols/src/Roo_JsonView.js.html
new file mode 100644 (file)
index 0000000..8a10ce8
--- /dev/null
@@ -0,0 +1,304 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/JsonView.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.JsonView
+ * @extends Roo.View
+ * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
+&lt;pre&gt;&lt;code&gt;
+var view = new Roo.JsonView(&quot;my-element&quot;,
+    '&amp;lt;div id=&quot;{id}&quot;&amp;gt;{foo} - {bar}&amp;lt;/div&amp;gt;', // auto create template
+    { multiSelect: true, jsonRoot: &quot;data&quot; }
+);
+
+// listen for node click?
+view.on(&quot;click&quot;, function(vw, index, node, e){
+    alert('Node &quot;' + node.id + '&quot; at index: ' + index + &quot; was clicked.&quot;);
+});
+
+// direct load of JSON data
+view.load(&quot;foobar.php&quot;);
+
+// Example from my blog list
+var tpl = new Roo.Template(
+    '&amp;lt;div class=&quot;entry&quot;&amp;gt;' +
+    '&amp;lt;a class=&quot;entry-title&quot; href=&quot;{link}&quot;&amp;gt;{title}&amp;lt;/a&amp;gt;' +
+    &quot;&amp;lt;h4&amp;gt;{date} by {author} | {comments} Comments&amp;lt;/h4&amp;gt;{description}&quot; +
+    &quot;&amp;lt;/div&amp;gt;&amp;lt;hr /&amp;gt;&quot;
+);
+
+var moreView = new Roo.JsonView(&quot;entry-list&quot;, tpl, {
+    jsonRoot: &quot;posts&quot;
+});
+moreView.on(&quot;beforerender&quot;, this.sortEntries, this);
+moreView.load({
+    url: &quot;/blog/get-posts.php&quot;,
+    params: &quot;allposts=true&quot;,
+    text: &quot;Loading Blog Entries...&quot;
+});
+&lt;/code&gt;&lt;/pre&gt;
+ * @constructor
+ * Create a new JsonView
+ * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
+ * @param {Template} tpl The rendering template
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.JsonView </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tpl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.JsonView.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tpl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">um </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">um.setRenderer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">um.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;update&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">um.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;failure&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoadException</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+    </span><span class="jsdoc-comment">/**
+     * @event beforerender
+     * Fires before rendering of the downloaded JSON data.
+     * @param {Roo.JsonView} this
+     * @param {Object} data The JSON data loaded
+     */
+    /**
+     * @event load
+     * Fires when data is loaded.
+     * @param {Roo.JsonView} this
+     * @param {Object} data The JSON data loaded
+     * @param {Object} response The raw Connect response object
+     */
+    /**
+     * @event loadexception
+     * Fires when loading fails.
+     * @param {Roo.JsonView} this
+     * @param {Object} response The raw Connect response object
+     */
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-string">'beforerender' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">'load' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">'loadexception' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.JsonView</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.View</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * The root property in the loaded JSON object that contains the data
+     * @type {String}
+     */
+    </span><span class="jsdoc-var">jsonRoot </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Refreshes the view.
+     */
+    </span><span class="jsdoc-var">refresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.clearSelections</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">o.length </span><span class="jsdoc-syntax">&gt; 0){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.prepareData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">html.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.tpl.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
+            }
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">html.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.emptyText</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">this.nodes </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.childNodes</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.updateIndexes</span><span class="jsdoc-syntax">(0);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Performs an async HTTP request, and loads the JSON from the response. If &lt;i&gt;params&lt;/i&gt; are specified it uses POST, otherwise it uses GET.
+     * @param {Object/String/Function} url The URL for this request, or a function to call to get the URL, or a config object containing any of the following options:
+     &lt;pre&gt;&lt;code&gt;
+     view.load({
+         url: &quot;your-url.php&quot;,
+         params: {param1: &quot;foo&quot;, param2: &quot;bar&quot;}, // or a URL encoded string
+         callback: yourFunction,
+         scope: yourObject, //(optional scope)
+         discardUrl: false,
+         nocache: false,
+         text: &quot;Loading...&quot;,
+         timeout: 30,
+         scripts: false
+     });
+     &lt;/code&gt;&lt;/pre&gt;
+     * The only required property is &lt;i&gt;url&lt;/i&gt;. The optional properties &lt;i&gt;nocache&lt;/i&gt;, &lt;i&gt;text&lt;/i&gt; and &lt;i&gt;scripts&lt;/i&gt;
+     * are respectively shorthand for &lt;i&gt;disableCaching&lt;/i&gt;, &lt;i&gt;indicatorText&lt;/i&gt;, and &lt;i&gt;loadScripts&lt;/i&gt; and are used to set their associated property on this UpdateManager instance.
+     * @param {String/Object} params (optional) The parameters to pass, as either a URL encoded string &quot;param1=1&amp;amp;param2=2&quot; or an object {param1: 1, param2: 2}
+     * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
+     * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+     */
+    </span><span class="jsdoc-var">load </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">um </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">um.update.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">um</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">render </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">, </span><span class="jsdoc-var">response</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.clearSelections</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.JSON.decode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">response.responseText</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.jsonRoot</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-comment">/** eval:var:o */ </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;o.&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.jsonRoot</span><span class="jsdoc-syntax">);
+            }
+        } </span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        }
+        </span><span class="jsdoc-comment">/**
+         * The current JSON data or null
+         */
+        </span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.beforeRender</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
+    },
+
+</span><span class="jsdoc-comment">/**
+ * Get the number of records in the current JSON dataset
+ * @return {Number}
+ */
+    </span><span class="jsdoc-var">getCount </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.jsonData.length </span><span class="jsdoc-syntax">: 0;
+    },
+
+</span><span class="jsdoc-comment">/**
+ * Returns the JSON object for the specified node(s)
+ * @param {HTMLElement/Array} node The node or an array of nodes
+ * @return {Object/Array} If you pass in an array, you get an array back, otherwise
+ * you get the JSON object for the node
+ */
+    </span><span class="jsdoc-var">getNodeData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= [];
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getNodeData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]));
+            }
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)] || </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">beforeRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.snapshot </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.sortInfo</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.sort.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.sortInfo</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforerender&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">onLoad </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;load&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">onLoadException </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">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;loadexception&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+    },
+
+</span><span class="jsdoc-comment">/**
+ * Filter the data by a specific property.
+ * @param {String} property A property on your JSON objects
+ * @param {String/RegExp} value Either string that the property values
+ * should start with, or a RegExp to test against the property
+ */
+    </span><span class="jsdoc-var">filter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= [];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.snapshot</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vlen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value.length</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">vlen </span><span class="jsdoc-syntax">== 0){
+                    </span><span class="jsdoc-var">this.clearFilter</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value.toLowerCase</span><span class="jsdoc-syntax">();
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.substr</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">vlen</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.toLowerCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                    }
+                }
+            } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value.exec</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// regex?
+                </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">])){
+                        </span><span class="jsdoc-var">data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                    }
+                }
+            } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
+        }
+    },
+
+</span><span class="jsdoc-comment">/**
+ * Filter by a function. The passed function will be called with each
+ * object in the current dataset. If the function returns true the value is kept,
+ * otherwise it is filtered.
+ * @param {Function} fn
+ * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
+ */
+    </span><span class="jsdoc-var">filterBy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= [];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.snapshot</span><span class="jsdoc-syntax">;
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-var">data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                }
+            }
+            </span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
+        }
+    },
+
+</span><span class="jsdoc-comment">/**
+ * Clears the current filter.
+ */
+    </span><span class="jsdoc-var">clearFilter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.snapshot </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.snapshot</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.snapshot</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
+        }
+    },
+
+
+</span><span class="jsdoc-comment">/**
+ * Sorts the data for this view and refreshes it.
+ * @param {String} property A property on your JSON objects to sort on
+ * @param {String} direction (optional) &quot;desc&quot; or &quot;asc&quot; (defaults to &quot;asc&quot;)
+ * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
+ */
+    </span><span class="jsdoc-var">sort </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sortType</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.sortInfo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.jsonData</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dsc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dir </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">dir.toLowerCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">&quot;desc&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o2</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sortType </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sortType</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o1</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">]) : </span><span class="jsdoc-var">o1</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sortType </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sortType</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o2</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">]) : </span><span class="jsdoc-var">o2</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">];
+                ;
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v1 </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">v2</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dsc </span><span class="jsdoc-syntax">? +1 : -1;
+                } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v1 </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">v2</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dsc </span><span class="jsdoc-syntax">? -1 : +1;
+                } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">0;
+                }
+            };
+            </span><span class="jsdoc-var">this.jsonData.sort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.jsonData </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.snapshot</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.snapshot.sort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">);
+            }
+        }
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_KeyMap.js.html b/docs/symbols/src/Roo_KeyMap.js.html
new file mode 100644 (file)
index 0000000..dbddada
--- /dev/null
@@ -0,0 +1,222 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/KeyMap.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.KeyMap
+ * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
+ * The constructor accepts the same config object as defined by {@link #addBinding}.
+ * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
+ * combination it will call the function with this signature (if the match is a multi-key
+ * combination the callback will still be called only once): (String key, Roo.EventObject e)
+ * A KeyMap can also handle a string representation of keys.&lt;br /&gt;
+ * Usage:
+ &lt;pre&gt;&lt;code&gt;
+// map one key by key code
+var map = new Roo.KeyMap(&quot;my-element&quot;, {
+    key: 13, // or Roo.EventObject.ENTER
+    fn: myHandler,
+    scope: myObject
+});
+
+// map multiple keys to one action by string
+var map = new Roo.KeyMap(&quot;my-element&quot;, {
+    key: &quot;a\r\n\t&quot;,
+    fn: myHandler,
+    scope: myObject
+});
+
+// map multiple keys to multiple actions by strings and array of codes
+var map = new Roo.KeyMap(&quot;my-element&quot;, [
+    {
+        key: [10,13],
+        fn: function(){ alert(&quot;Return was pressed&quot;); }
+    }, {
+        key: &quot;abc&quot;,
+        fn: function(){ alert('a, b or c was pressed'); }
+    }, {
+        key: &quot;\t&quot;,
+        ctrl:true,
+        shift:true,
+        fn: function(){ alert('Control + shift + tab was pressed.'); }
+    }
+]);
+&lt;/code&gt;&lt;/pre&gt;
+ * &lt;b&gt;Note: A KeyMap starts enabled&lt;/b&gt;
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The element to bind to
+ * @param {Object} config The config (see {@link #addBinding})
+ * @param {String} eventName (optional) The event to bind to (defaults to &quot;keydown&quot;)
+ */
+</span><span class="jsdoc-var">Roo.KeyMap </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventName</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">this.el  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.eventName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">eventName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.bindings </span><span class="jsdoc-syntax">= [];
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.addBinding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">this.enable</span><span class="jsdoc-syntax">();
+};
+
+</span><span class="jsdoc-var">Roo.KeyMap.prototype </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-comment">/**
+     * True to stop the event from bubbling and prevent the default browser action if the
+     * key was handled by the KeyMap (defaults to false)
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">stopEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Add a new binding to this KeyMap. The following config object properties are supported:
+     * &lt;pre&gt;
+Property    Type             Description
+----------  ---------------  ----------------------------------------------------------------------
+key         String/Array     A single keycode or an array of keycodes to handle
+shift       Boolean          True to handle key only when shift is pressed (defaults to false)
+ctrl        Boolean          True to handle key only when ctrl is pressed (defaults to false)
+alt         Boolean          True to handle key only when alt is pressed (defaults to false)
+fn          Function         The function to call when KeyMap finds the expected key combination
+scope       Object           The scope of the callback function
+&lt;/pre&gt;
+     *
+     * Usage:
+     * &lt;pre&gt;&lt;code&gt;
+// Create a KeyMap
+var map = new Roo.KeyMap(document, {
+    key: Roo.EventObject.ENTER,
+    fn: handleKey,
+    scope: this
+});
+
+//Add a new binding to the existing KeyMap later
+map.addBinding({
+    key: 'abc',
+    shift: true,
+    fn: handleKey,
+    scope: this
+});
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {Object/Array} config A single KeyMap config or an array of configs
+     */
+       </span><span class="jsdoc-var">addBinding </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">this.addBinding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+            }
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.key</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.shift</span><span class="jsdoc-syntax">, 
+            </span><span class="jsdoc-var">ctrl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.ctrl</span><span class="jsdoc-syntax">, 
+            </span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.alt</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.fn</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.scope</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ks </span><span class="jsdoc-syntax">= [];
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keyString </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">keyCode.toUpperCase</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">keyString.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
+                </span><span class="jsdoc-var">ks.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">keyString.charCodeAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">));
+            }
+            </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ks</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keyArray </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">handler </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">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((!</span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.shiftKey</span><span class="jsdoc-syntax">) &amp;&amp; (!</span><span class="jsdoc-var">ctrl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">) &amp;&amp;  (!</span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.altKey</span><span class="jsdoc-syntax">)){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">keyArray</span><span class="jsdoc-syntax">){
+                    </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">keyCode.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+                          </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stopEvent</span><span class="jsdoc-syntax">){
+                              </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+                          }
+                          </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                          </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                        }
+                    }
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stopEvent</span><span class="jsdoc-syntax">){
+                           </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+                        }
+                        </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                    }
+                }
+            }
+        };
+        </span><span class="jsdoc-var">this.bindings.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">);  
+       },
+
+    </span><span class="jsdoc-comment">/**
+     * Shorthand for adding a single key listener
+     * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
+     * following options:
+     * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function
+     */
+    </span><span class="jsdoc-var">on </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">shift</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ctrl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">alt</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">&amp;&amp; !(</span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key.key</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key.shift</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">ctrl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key.ctrl</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key.alt</span><span class="jsdoc-syntax">;
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">keyCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.addBinding</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">keyCode</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">shift</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">shift</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">ctrl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ctrl</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">alt</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">alt</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope
+        </span><span class="jsdoc-syntax">})
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">handleKeyDown </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">){
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">//just in case
+           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bindings</span><span class="jsdoc-syntax">;
+           </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+               </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+           }
+           }
+       },
+       
+       </span><span class="jsdoc-comment">/**
+        * Returns true if this KeyMap is enabled
+        * @return {Boolean} 
+        */
+       </span><span class="jsdoc-var">isEnabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">;  
+       },
+       
+       </span><span class="jsdoc-comment">/**
+        * Enables this KeyMap
+        */
+       </span><span class="jsdoc-var">enable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleKeyDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                   </span><span class="jsdoc-var">this.enabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+               }
+       },
+
+       </span><span class="jsdoc-comment">/**
+        * Disable this KeyMap
+        */
+       </span><span class="jsdoc-var">disable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">this.el.removeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.eventName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleKeyDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                   </span><span class="jsdoc-var">this.enabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+               }
+       }
+};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_KeyNav.js.html b/docs/symbols/src/Roo_KeyNav.js.html
new file mode 100644 (file)
index 0000000..6204e74
--- /dev/null
@@ -0,0 +1,157 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/KeyNav.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.KeyNav
+ * &lt;p&gt;Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
+ * navigation keys to function calls that will get called when the keys are pressed, providing an easy
+ * way to implement custom navigation schemes for any UI component.&lt;/p&gt;
+ * &lt;p&gt;The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
+ * pageUp, pageDown, del, home, end.  Usage:&lt;/p&gt;
+ &lt;pre&gt;&lt;code&gt;
+var nav = new Roo.KeyNav(&quot;my-element&quot;, {
+    &quot;left&quot; : function(e){
+        this.moveLeft(e.ctrlKey);
+    },
+    &quot;right&quot; : function(e){
+        this.moveRight(e.ctrlKey);
+    },
+    &quot;enter&quot; : function(e){
+        this.save();
+    },
+    scope : this
+});
+&lt;/code&gt;&lt;/pre&gt;
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The element to bind to
+ * @param {Object} config The config
+ */
+</span><span class="jsdoc-var">Roo.KeyNav </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">Roo.apply</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">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.enable</span><span class="jsdoc-syntax">();
+    }
+};
+
+</span><span class="jsdoc-var">Roo.KeyNav.prototype </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} disabled
+     * True to disable this KeyNav instance (defaults to false)
+     */
+    </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} defaultEventAction
+     * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key.  Valid values are
+     * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
+     * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
+     */
+    </span><span class="jsdoc-var">defaultEventAction</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;stopEvent&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} forceKeyDown
+     * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
+     * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
+     * handle keydown instead of keypress.
+     */
+    </span><span class="jsdoc-var">forceKeyDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">prepareEvent </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyToHandler</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-comment">//if(h &amp;&amp; this[h]){
+        //    e.stopPropagation();
+        //}
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 37 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 40){
+            </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">relay </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyToHandler</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">];
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">]){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.doRelay</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.defaultEventAction</span><span class="jsdoc-syntax">]();
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">doRelay </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">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hname</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">h.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// possible handlers
+    </span><span class="jsdoc-var">enter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">left </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">right </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">up </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">down </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">esc </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">pageUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">pageDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">del </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">home </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// quick lookup hash
+    </span><span class="jsdoc-var">keyToHandler </span><span class="jsdoc-syntax">: {
+        37 : </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">,
+        39 : </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">,
+        38 : </span><span class="jsdoc-string">&quot;up&quot;</span><span class="jsdoc-syntax">,
+        40 : </span><span class="jsdoc-string">&quot;down&quot;</span><span class="jsdoc-syntax">,
+        33 : </span><span class="jsdoc-string">&quot;pageUp&quot;</span><span class="jsdoc-syntax">,
+        34 : </span><span class="jsdoc-string">&quot;pageDown&quot;</span><span class="jsdoc-syntax">,
+        46 : </span><span class="jsdoc-string">&quot;del&quot;</span><span class="jsdoc-syntax">,
+        36 : </span><span class="jsdoc-string">&quot;home&quot;</span><span class="jsdoc-syntax">,
+        35 : </span><span class="jsdoc-string">&quot;end&quot;</span><span class="jsdoc-syntax">,
+        13 : </span><span class="jsdoc-string">&quot;enter&quot;</span><span class="jsdoc-syntax">,
+        27 : </span><span class="jsdoc-string">&quot;esc&quot;</span><span class="jsdoc-syntax">,
+        9  : </span><span class="jsdoc-string">&quot;tab&quot;
+    </span><span class="jsdoc-syntax">},
+
+       </span><span class="jsdoc-comment">/**
+        * Enable this KeyNav
+        */
+       </span><span class="jsdoc-var">enable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-comment">// ie won't do special keys on keypress, no one else will repeat keys with keydown
+            // the EventObject will normalize Safari automatically
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.forceKeyDown </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isAir</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.prepareEvent</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keypress&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }
+                   </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+               }
+       },
+
+       </span><span class="jsdoc-comment">/**
+        * Disable this KeyNav
+        */
+       </span><span class="jsdoc-var">disable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+               </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.forceKeyDown </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isAir</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.prepareEvent</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keypress&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">);
+            }
+                   </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+               }
+       }
+};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_Layer.js.html b/docs/symbols/src/Roo_Layer.js.html
new file mode 100644 (file)
index 0000000..6380293
--- /dev/null
@@ -0,0 +1,458 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/Layer.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+ </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){ 
+</span><span class="jsdoc-comment">/**
+ * @class Roo.Layer
+ * @extends Roo.Element
+ * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
+ * automatic maintaining of shadow/shim positions.
+ * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
+ * @cfg {String/Boolean} shadow True to create a shadow element with default class &quot;x-layer-shadow&quot;, or
+ * you can pass a string with a CSS class name. False turns off the shadow.
+ * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: &quot;div&quot;, cls: &quot;x-layer&quot;}).
+ * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
+ * @cfg {String} cls CSS class to add to the element
+ * @cfg {Number} zindex Starting z-index (defaults to 11000)
+ * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
+ * @constructor
+ * @param {Object} config An object with config options.
+ * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
+ */
+
+</span><span class="jsdoc-var">Roo.Layer </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">, </span><span class="jsdoc-var">existingEl</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.parentEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cp </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cp</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">existingEl</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">existingEl</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.dh </span><span class="jsdoc-syntax">|| {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layer&quot;</span><span class="jsdoc-syntax">};
+        </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.cls</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.cls</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">this.constrain </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.constrain </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.visibilityMode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Element.VISIBILITY</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.id</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.id</span><span class="jsdoc-syntax">;
+    }</span><span class="jsdoc-keyword">else</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">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">this.zindex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.zindex </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.getZIndex</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.zindex</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.shadow</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.shadowOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.shadowOffset </span><span class="jsdoc-syntax">|| 4;
+        </span><span class="jsdoc-var">this.shadow </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Shadow</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">mode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config.shadow
+        </span><span class="jsdoc-syntax">});
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-var">this.shadowOffset </span><span class="jsdoc-syntax">= 0;
+    }
+    </span><span class="jsdoc-var">this.useShim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.shim </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.useShims</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.useDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.useDisplay</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+};
+
+</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">supr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">// shims are shared among layer to keep from having 100 iframes
+</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shims </span><span class="jsdoc-syntax">= [];
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Layer</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">, {
+
+    </span><span class="jsdoc-var">getZIndex </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.zindex </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">), 10) || 11000;
+    },
+
+    </span><span class="jsdoc-var">getShim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.useShim</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">shims.shift</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">shim</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">shim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createShim</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">shim.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">shim.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">shim.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">shim.dom.parentNode </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">pn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">pn.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">shim.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">shim.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'z-index'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getZIndex</span><span class="jsdoc-syntax">()-2);
+        </span><span class="jsdoc-var">this.shim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">shim</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">shim</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">hideShim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shim.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">shims.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">;
+        }
+    },
+
+    </span><span class="jsdoc-var">disableShadow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadowDisabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.shadow.hide</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.lastShadowOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.shadowOffset </span><span class="jsdoc-syntax">= 0;
+        }
+    },
+
+    </span><span class="jsdoc-var">enableShadow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadowDisabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.shadowOffset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.lastShadowOffset</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.lastShadowOffset</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    // this code can execute repeatedly in milliseconds (i.e. during a drag) so
+    // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
+    </span><span class="jsdoc-var">sync </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doShow</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">() &amp;&amp; (</span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.useShim</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getShim</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">(),
+                </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.shadowDisabled</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doShow </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">sw.isVisible</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">sw.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">sw.realign</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doShow</span><span class="jsdoc-syntax">){
+                       </span><span class="jsdoc-var">sh.show</span><span class="jsdoc-syntax">();
+                    }
+                    </span><span class="jsdoc-comment">// fit the shim behind the shadow, so it is shimmed too
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sw.adjusts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sh.dom.style</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">s.left </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">a.l</span><span class="jsdoc-syntax">))+</span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">s.top </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">a.t</span><span class="jsdoc-syntax">))+</span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">s.width </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">a.w</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">s.height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">a.h</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+                }
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doShow</span><span class="jsdoc-syntax">){
+                   </span><span class="jsdoc-var">sh.show</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-var">sh.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">sh.setLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
+            }
+            
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.hideShim</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadow.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.removeAllListeners</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.parentNode</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">pn.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">Roo.Element.uncache</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.destroy</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">hideUnders </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">negOffset</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadow.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.hideShim</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">constrainXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(),
+                </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </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">.getScroll</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1];   
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.offsetWidth</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.offsetHeight</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// only move it if it needs it
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// first validate right/bottom
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">vw</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">vh</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vh </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.shadowOffset</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-comment">// then make sure top/left isn't negative
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">moved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">moved</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.avoidY</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.avoidY</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) &gt;= </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">-5;   
+                    }
+                }
+                </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-var">this.storeXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">supr.setXY.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+
+    </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.visible</span><span class="jsdoc-syntax">;    
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">showAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// track visibility to prevent getStyle calls
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useDisplay </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastXY</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">supr.setXY.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.lastXY</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastLT</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">supr.setLeftTop.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.lastLT</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">this.lastLT</span><span class="jsdoc-syntax">[1]);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">hideAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useDisplay </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.setLeftTop</span><span class="jsdoc-syntax">(-10000,-10000);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.showAction</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">c</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">);
+            </span><span class="jsdoc-var">supr.setVisible.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.hideUnders</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">c</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">);
+            }
+            </span><span class="jsdoc-var">supr.setVisible.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+
+    </span><span class="jsdoc-var">storeXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.lastLT</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.lastXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">storeLeftTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.lastXY</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.lastLT </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">];
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">beforeFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.beforeAction</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.Layer.superclass.beforeFx.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">afterFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.Layer.superclass.afterFx.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">());
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">beforeAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadow.hide</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.storeLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">supr.setLeft.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">setTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.storeLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">supr.setTop.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">setLeftTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.storeLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">supr.setLeftTop.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.sync</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-var">setXY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.beforeAction</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.storeXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createCB</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">supr.setXY.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">createCB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(){
+            </span><span class="jsdoc-var">el.constrainXY</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">el.sync</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">();
+            }
+        };
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setX </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getY</span><span class="jsdoc-syntax">()], </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setY </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">this.getX</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.beforeAction</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createCB</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">supr.setSize.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.beforeAction</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createCB</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">supr.setWidth.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.beforeAction</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createCB</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">supr.setHeight.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">// overridden Element method
+    </span><span class="jsdoc-var">setBounds </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.beforeAction</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createCB</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.storeXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">]);
+            </span><span class="jsdoc-var">supr.setXY.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">]);
+            </span><span class="jsdoc-var">supr.setSize.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">supr.setBounds.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
+     * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
+     * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
+     * @param {Number} zindex The new z-index to set
+     * @return {this} The Layer
+     */
+    </span><span class="jsdoc-var">setZIndex </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">zindex</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.zindex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">zindex</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">zindex </span><span class="jsdoc-syntax">+ 2);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shadow.setZIndex</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">zindex </span><span class="jsdoc-syntax">+ 1);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.shim</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.shim.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;z-index&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">zindex</span><span class="jsdoc-syntax">);
+        }
+    }
+});
+})();</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_LayoutManager.js.html b/docs/symbols/src/Roo_LayoutManager.js.html
new file mode 100644 (file)
index 0000000..97fc3cf
--- /dev/null
@@ -0,0 +1,146 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/LayoutManager.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.LayoutManager
+ * @extends Roo.util.Observable
+ * Base class for layout managers.
+ */
+</span><span class="jsdoc-var">Roo.LayoutManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.LayoutManager.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">// ie scrollbar fix
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">config.allowScroll</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">document.body.scroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;no&quot;</span><span class="jsdoc-syntax">;
+    }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'static'</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'relative'</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.id</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-container&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">/** false to disable window resize monitoring @type Boolean */
+    </span><span class="jsdoc-var">this.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.regions </span><span class="jsdoc-syntax">= {};
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+         * @event layout
+         * Fires when a layout is performed. 
+         * @param {Roo.LayoutManager} this
+         */
+        </span><span class="jsdoc-string">&quot;layout&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event regionresized
+         * Fires when the user resizes a region. 
+         * @param {Roo.LayoutRegion} region The resized region
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        </span><span class="jsdoc-string">&quot;regionresized&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event regioncollapsed
+         * Fires when a region is collapsed. 
+         * @param {Roo.LayoutRegion} region The collapsed region
+         */
+        </span><span class="jsdoc-string">&quot;regioncollapsed&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event regionexpanded
+         * Fires when a region is expanded.  
+         * @param {Roo.LayoutRegion} region The expanded region
+         */
+        </span><span class="jsdoc-string">&quot;regionexpanded&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.onWindowResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.LayoutManager</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this layout is currently being updated
+     * @return {Boolean}
+     */
+    </span><span class="jsdoc-var">isUpdating </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updating</span><span class="jsdoc-syntax">; 
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Suspend the LayoutManager from doing auto-layouts while
+     * making multiple add or remove calls
+     */
+    </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;    
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Restore auto-layouts and optionally disable the manager from performing a layout
+     * @param {Boolean} noLayout true to disable a layout update 
+     */
+    </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">noLayout</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">noLayout</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
+        }    
+    },
+    
+    </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        
+    },
+    
+    </span><span class="jsdoc-var">onRegionResized </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regionresized&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">onRegionCollapsed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regioncollapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">);
+    },
+    
+    </span><span class="jsdoc-var">onRegionExpanded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regionexpanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">);
+    },
+        
+    </span><span class="jsdoc-comment">/**
+     * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
+     * performs box-model adjustments.
+     * @return {Object} The size as an object {width: (the width), height: (the height)}
+     */
+    </span><span class="jsdoc-var">getViewSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()};
+        }
+        </span><span class="jsdoc-var">size.width </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">size.height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the Element this layout is bound to.
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+     * Returns the specified region.
+     * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
+     * @return {Roo.LayoutRegion}
+     */
+    </span><span class="jsdoc-var">getRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">()];
+    },
+    
+    </span><span class="jsdoc-var">onWindowResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorWindowResize</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
+        }
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_LayoutRegion.js.html b/docs/symbols/src/Roo_LayoutRegion.js.html
new file mode 100644 (file)
index 0000000..f19d6e1
--- /dev/null
@@ -0,0 +1,602 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/LayoutRegion.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.LayoutRegion
+ * @extends Roo.BasicLayoutRegion
+ * This class represents a region in a layout manager.
+ * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
+ * @cfg {Boolean} collapsed True to set the initial display to collapsed (defaults to false)
+ * @cfg {Boolean} floatable False to disable floating (defaults to true)
+ * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
+ * @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
+ * @cfg {String} tabPosition &quot;top&quot; or &quot;bottom&quot; (defaults to &quot;bottom&quot;)
+ * @cfg {String} collapsedTitle Optional string message to display in the collapsed block of a north or south region
+ * @cfg {Boolean} alwaysShowTabs True to always display tabs even when there is only 1 panel (defaults to false)
+ * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
+ * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
+ * @cfg {String} title The title for the region (overrides panel titles)
+ * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
+ * @cfg {Boolean} autoHide False to disable auto hiding when the mouse leaves the &quot;floated&quot; region (defaults to true)
+ * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
+ * @cfg {Boolean} closeOnTab True to place the close icon on the tabs instead of the region titlebar (defaults to false)
+ * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
+ * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
+ * the space available, similar to FireFox 1.5 tabs (defaults to false)
+ * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
+ * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
+ * @cfg {Boolean} showPin True to show a pin button
+* @cfg {Boolean} hidden True to start the region hidden (defaults to false)
+* @cfg {Boolean} hideWhenEmpty True to hide the region when it has no panels
+* @cfg {Boolean} disableTabTips True to disable tab tooltips
+* @cfg {Number} width  For East/West panels
+* @cfg {Number} height For North/South panels
+* @cfg {Boolean} split To show the splitter
+ */
+</span><span class="jsdoc-var">Roo.LayoutRegion </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">Roo.LayoutRegion.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">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-comment">/** This region's container element 
+    * @type Roo.Element */
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr.el.dom</span><span class="jsdoc-syntax">, {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-panel x-layout-panel-&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-comment">/** This region's title element 
+    * @type Roo.Element */
+
+    </span><span class="jsdoc-var">this.titleEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">, {</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">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd x-layout-title-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">:[
+        {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;span&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd-text&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</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">},
+        {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd-tools&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">}
+    ]}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.titleEl.enableDisplayMode</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-comment">/** This region's title text element 
+    * @type HTMLElement */
+    </span><span class="jsdoc-var">this.titleTextEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.titleEl.dom.firstChild</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.tools </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.titleEl.dom.childNodes</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.closeBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tools.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-close&quot;</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.closeBtn.enableDisplayMode</span><span class="jsdoc-syntax">();
+    </span><span class="jsdoc-var">this.closeBtn.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.closeClicked</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.closeBtn.hide</span><span class="jsdoc-syntax">();
+
+    </span><span class="jsdoc-var">this.createBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+    </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">this.hide</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.validateVisibility</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelremoved&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.validateVisibility</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    }
+    </span><span class="jsdoc-var">this.applyConfig</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.LayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BasicLayoutRegion</span><span class="jsdoc-syntax">, {
+
+    </span><span class="jsdoc-var">createBody </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-comment">/** This region's body element 
+        * @type Roo.Element */
+        </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">({</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-panel-body&quot;</span><span class="jsdoc-syntax">});
+    },
+
+    </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">c</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsible </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;center&quot; </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.collapsedEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.titlebar </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.collapseBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tools.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-collapse-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.collapseBtn.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.collapse</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.collapseBtn.enableDisplayMode</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.showPin </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.showPin</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.stickBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tools.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-stick&quot;</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">this.stickBtn.enableDisplayMode</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">this.stickBtn.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.expand</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">this.stickBtn.hide</span><span class="jsdoc-syntax">();
+                }
+            }
+            </span><span class="jsdoc-comment">/** This region's collapsed element
+            * @type Roo.Element */
+            </span><span class="jsdoc-var">this.collapsedEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mgr.el.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-collapsed x-layout-collapsed-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">:[
+                {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-collapsed-tools&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">:[{</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-ctools-inner&quot;</span><span class="jsdoc-syntax">}]}
+            ]}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.floatable </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">this.collapsedEl.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-collapsed-over&quot;</span><span class="jsdoc-syntax">);
+               </span><span class="jsdoc-var">this.collapsedEl.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.collapseClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }
+
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsedTitle </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;north&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">)) {
+                </span><span class="jsdoc-var">this.collapsedTitleTextEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedEl.dom</span><span class="jsdoc-syntax">, {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd-text&quot;</span><span class="jsdoc-syntax">,
+                   </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;message&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-string">&quot;float&quot;</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">}});
+               </span><span class="jsdoc-var">this.collapsedTitleTextEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.collapsedTitle</span><span class="jsdoc-syntax">;
+             }
+            </span><span class="jsdoc-var">this.expandBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedEl.dom.firstChild.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-expand-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.expandBtn.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.expand</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapseBtn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.collapseBtn.setVisible</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsible </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.cmargins </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.cmargins </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.cmargins </span><span class="jsdoc-syntax">||
+                         (</span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;west&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;east&quot; </span><span class="jsdoc-syntax">?
+                             {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 2, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:2, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 0} :
+                             {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 2, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 2});
+        </span><span class="jsdoc-var">this.margins </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.margins </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.margins </span><span class="jsdoc-syntax">|| {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 0};
+        </span><span class="jsdoc-var">this.bottomTabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.tabPosition </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.autoScroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.autoScroll </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoScroll</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-comment">//if(c.titlebar !== false){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((!</span><span class="jsdoc-var">c.titlebar </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">c.title</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">c.titlebar </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.titleEl.hide</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.titleEl.show</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.title</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.titleTextEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.title</span><span class="jsdoc-syntax">;
+                }
+            }
+        </span><span class="jsdoc-comment">//}
+        </span><span class="jsdoc-var">this.duration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.duration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">30;
+        </span><span class="jsdoc-var">this.slideDuration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.slideDuration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">45;
+        </span><span class="jsdoc-var">this.config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.hidden</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+        }
+    },
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.visible</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
+     * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, &quot;&amp;amp;#160;&quot;)
+     */
+    </span><span class="jsdoc-var">setCollapsedTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedTitleTextEl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.collapsedTitleTextEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">;
+        }
+    },
+
+    </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.collapsedEl.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">getMargins </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.cmargins </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.margins</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">highlight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-panel-dragover&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">unhighlight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-panel-dragover&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.el.dom.style.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.updateBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.collapsedEl.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.collapsedEl.dom.style.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.collapsedEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tabs.autoSizeTabs</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-var">updateBody </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;rl&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">[0];
+            }
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.titleEl </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.titleEl.isDisplayed</span><span class="jsdoc-syntax">() ? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">this.titleEl.getHeight</span><span class="jsdoc-syntax">()||0) : </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">[1];
+            }
+            </span><span class="jsdoc-var">this.bodyEl.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.syncHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panelSize</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.panelSize.width</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.panelSize.height</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el.getWidth</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el.getHeight</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.panelSize </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
+            </span><span class="jsdoc-var">this.activePanel.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tabs.el.repaint</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Hides this region.
+     */
+    </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;-2000px&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.collapsedEl.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;-2000px&quot;</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.collapsedEl.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibilitychange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Shows this region if it was previously hidden.
+     */
+    </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.collapsedEl.show</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibilitychange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">closeClicked </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-var">collapseClick </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">){
+        </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">e.stopPropagation</span><span class="jsdoc-syntax">();
+           </span><span class="jsdoc-var">this.slideIn</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+           </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
+           </span><span class="jsdoc-var">this.slideOut</span><span class="jsdoc-syntax">();
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Collapses this region.
+     * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+     */
+    </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">skipAnim</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.split.el.hide</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.animate </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">skipAnim </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </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">);
+            </span><span class="jsdoc-var">this.animateCollapse</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.el.setLocation</span><span class="jsdoc-syntax">(-20000,-20000);
+            </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.collapsedEl.show</span><span class="jsdoc-syntax">();
+            </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">);
+            </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">);
+        }
+    },
+
+    </span><span class="jsdoc-var">animateCollapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-comment">// overridden
+    </span><span class="jsdoc-syntax">},
+
+    </span><span class="jsdoc-comment">/**
+     * Expands this region if it was previously collapsed.
+     * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
+     * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+     */
+    </span><span class="jsdoc-var">expand </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">, </span><span class="jsdoc-var">skipAnim</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.hasActiveFx</span><span class="jsdoc-syntax">()) </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        </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.afterSlideIn</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">skipAnim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.animate </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">skipAnim </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.animateExpand</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.split.el.show</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-var">this.collapsedEl.setLocation</span><span class="jsdoc-syntax">(-2000,-2000);
+            </span><span class="jsdoc-var">this.collapsedEl.hide</span><span class="jsdoc-syntax">();
+            </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">);
+            </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">);
+        }
+    },
+
+    </span><span class="jsdoc-var">animateExpand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-comment">// overridden
+    </span><span class="jsdoc-syntax">},
+
+    </span><span class="jsdoc-var">initTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.TabPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bodyEl.dom</span><span class="jsdoc-syntax">, {
+            </span><span class="jsdoc-var">tabPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bottomTabs </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'bottom' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">disableTooltips</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.config.disableTabTips
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.hideTabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ts.stripWrap.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">ts.resizeTabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.resizeTabs </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">ts.minTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.minTabWidth </span><span class="jsdoc-syntax">|| 40;
+        </span><span class="jsdoc-var">ts.maxTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.maxTabWidth </span><span class="jsdoc-syntax">|| 250;
+        </span><span class="jsdoc-var">ts.preferredTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.preferredTabWidth </span><span class="jsdoc-syntax">|| 150;
+        </span><span class="jsdoc-var">ts.monitorResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">ts.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.config.autoScroll </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">ts.bodyEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-layout-tabs-body'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.panels.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initPanelAsTab</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">initPanelAsTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ti </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.addTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel.getTitle</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">this.config.closeOnTab </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">panel.isClosable</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ti.setTooltip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">ti.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+              </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.closeOnTab</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ti.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeclose&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">e.cancel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ti</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">updatePanelTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ti </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.getTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">ti.setText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">ti.setTooltip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip</span><span class="jsdoc-syntax">);
+            }
+        }
+    },
+
+    </span><span class="jsdoc-var">updateTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.titleTextEl </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.config.title</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.titleTextEl.innerHTML </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">title.length </span><span class="jsdoc-syntax">&gt; 0 ? </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-var">setActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.activePanel.setActiveState</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">panel.setActiveState</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panelSize</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">panel.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panelSize.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.panelSize.height</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.closeBtn</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.closeBtn.setVisible</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.config.closeOnTab </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">panel.isClosable</span><span class="jsdoc-syntax">());
+        }
+        </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getTitle</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </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">);
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelactivated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Shows the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+     */
+    </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.getTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.isHidden</span><span class="jsdoc-syntax">()){
+                    </span><span class="jsdoc-var">this.tabs.unhideTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.id</span><span class="jsdoc-syntax">);
+                }
+                </span><span class="jsdoc-var">tab.activate</span><span class="jsdoc-syntax">();
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    </span><span class="jsdoc-var">getActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">validateVisibility </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() &lt; 1){
+            </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.closeBtn.hide</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Adds the passed ContentPanel(s) to this region.
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+     */
+    </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){
+            </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+            }
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">)){
+            </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">panel.setRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.panels.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() == 1 &amp;&amp; !</span><span class="jsdoc-var">this.config.alwaysShowTabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.bodyEl.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.background </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.initTabs</span><span class="jsdoc-syntax">();
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.initPanelAsTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.background </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tabs.activate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Hides the tab for the specified panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    </span><span class="jsdoc-var">hidePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">))){
+            </span><span class="jsdoc-var">this.tabs.hideTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Unhides the tab for a previously hidden panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    </span><span class="jsdoc-var">unhidePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">))){
+            </span><span class="jsdoc-var">this.tabs.unhideTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-var">clearPanels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() &gt; 0){
+             </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.first</span><span class="jsdoc-syntax">());
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= {};
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeremove&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.cancel </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.config.preservePanels </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">panel.preserve </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">panelId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel.getId</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.panels.removeKey</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">document.body.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tabs.removeTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.bodyEl.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() == 1 &amp;&amp; </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.config.alwaysShowTabs</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.panels.first</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// temp holder to keep IE from deleting the node
+            </span><span class="jsdoc-var">tempEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.bodyEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.bodyEl.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">tempEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getTitle</span><span class="jsdoc-syntax">());
+            </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.config.autoScroll </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-var">panel.setRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.autoDestroy </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">panel.destroy</span><span class="jsdoc-syntax">();}</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
+        }
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelremoved&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns the TabPanel component used by this region
+     * @return {Roo.TabPanel}
+     */
+    </span><span class="jsdoc-var">getTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-var">createTool </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parentEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parentEl</span><span class="jsdoc-syntax">, {</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-tools-button&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">: [{</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">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-tools-button-inner &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">className</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">}]}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">btn.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-tools-button-over&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
+    }
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_LayoutStateManager.js.html b/docs/symbols/src/Roo_LayoutStateManager.js.html
new file mode 100644 (file)
index 0000000..0fb2877
--- /dev/null
@@ -0,0 +1,80 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/LayoutStateManager.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/*
+ * Private internal class for reading and applying state
+ */
+</span><span class="jsdoc-var">Roo.LayoutStateManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">){
+     </span><span class="jsdoc-comment">// default empty state
+     </span><span class="jsdoc-var">this.state </span><span class="jsdoc-syntax">= {
+        </span><span class="jsdoc-var">north</span><span class="jsdoc-syntax">: {},
+        </span><span class="jsdoc-var">south</span><span class="jsdoc-syntax">: {},
+        </span><span class="jsdoc-var">east</span><span class="jsdoc-syntax">: {},
+        </span><span class="jsdoc-var">west</span><span class="jsdoc-syntax">: {}       
+    };
+};
+
+</span><span class="jsdoc-var">Roo.LayoutStateManager.prototype </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-var">init </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.provider </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">provider.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout.id</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;-layout-state&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wasUpdating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout.isUpdating</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">wasUpdating</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">layout.beginUpdate</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rstate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">];
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">rstate</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rstate.size</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">r.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rstate.size</span><span class="jsdoc-syntax">);
+                        }
+                        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rstate.collapsed </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
+                            </span><span class="jsdoc-var">r.collapse</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                            </span><span class="jsdoc-var">r.expand</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                        }
+                    }
+                }
+            }
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">wasUpdating</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">layout.endUpdate</span><span class="jsdoc-syntax">();
+            }
+            </span><span class="jsdoc-var">this.state </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">; 
+        }
+        </span><span class="jsdoc-var">this.layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">layout.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regionresized&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionResized</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">layout.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regioncollapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionCollapsed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">layout.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regionexpanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionExpanded</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+    
+    </span><span class="jsdoc-var">storeState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.provider.set</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.layout.id</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;-layout-state&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.state</span><span class="jsdoc-syntax">);
+    },
+    
+    </span><span class="jsdoc-var">onRegionResized </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.state</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region.getPosition</span><span class="jsdoc-syntax">()]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.storeState</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">onRegionCollapsed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.state</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region.getPosition</span><span class="jsdoc-syntax">()]</span><span class="jsdoc-var">.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.storeState</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">onRegionExpanded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.state</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region.getPosition</span><span class="jsdoc-syntax">()]</span><span class="jsdoc-var">.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.storeState</span><span class="jsdoc-syntax">();
+    }
+};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/Roo_LoadMask.js.html b/docs/symbols/src/Roo_LoadMask.js.html
new file mode 100644 (file)
index 0000000..2d5ee91
--- /dev/null
@@ -0,0 +1,103 @@
+<html><head><title>/home/alan/gitlive/roojs1/Roo/LoadMask.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+/**
+ * @class Roo.LoadMask
+ * A simple utility class for generically masking elements while loading data.  If the element being masked has
+ * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
+ * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
+ * element's UpdateManager load indicator and will be destroyed after the initial load.
+ * @constructor
+ * Create a new LoadMask
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.LoadMask </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">Roo.apply</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">);
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.store.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeload'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBeforeLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.store.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'load'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.store.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'loadexception'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.removeMask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">um </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">um.showLoadIndicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// disable the default indicator
+        </span><span class="jsdoc-var">um.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeupdate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBeforeLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">um.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'update'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">um.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'failure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.removeMask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    }
+};
+
+</span><span class="jsdoc-var">Roo.LoadMask.prototype </span><span class="jsdoc-syntax">= {
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} removeMask
+     * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
+     * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
+     */
+    /**
+     * @cfg {String} msg
+     * The text to display in a centered loading message box (defaults to 'Loading...')
+     */
+    </span><span class="jsdoc-var">msg </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Loading...'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} msgCls
+     * The CSS class to apply to the loading message element (defaults to &quot;x-mask-loading&quot;)
+     */
+    </span><span class="jsdoc-var">msgCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-mask-loading'</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
+     * @type Boolean
+     */
+    </span><span class="jsdoc-var">disabled</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Disables the mask to prevent it from being displayed
+     */
+    </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+       </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Enables the mask so that it can be displayed
+     */
+    </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.el.unmask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.removeMask</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onBeforeLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.mask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.msg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.msgCls</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.store.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeload'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBeforeLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.store.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'load'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.store.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'loadexception'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">um </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getUpdateManager</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">um.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeupdate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBeforeLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">um.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'update'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">um.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'failure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    }
+};</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/src/String.js.html b/docs/symbols/src/String.js.html
new file mode 100644 (file)
index 0000000..fd99b32
--- /dev/null
@@ -0,0 +1,91 @@
+<html><head><title>/home/alan/gitlive/roojs1/String.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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+</span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">, {
+    
+    </span><span class="jsdoc-comment">/** @scope String */
+    
+    /**
+     * Escapes the passed string for ' and \
+     * @param {String} string The string to escape
+     * @return {String} The escaped string
+     * @static
+     */
+    </span><span class="jsdoc-var">escape </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">string</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">string.replace</span><span class="jsdoc-syntax">(/('|\\)/g, </span><span class="jsdoc-string">&quot;\\$1&quot;</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Pads the left side of a string with a specified character.  This is especially useful
+     * for normalizing number and date strings.  Example usage:
+     * &lt;pre&gt;&lt;code&gt;
+var s = String.leftPad('123', 5, '0');
+// s now contains the string: '00123'
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {String} string The original string
+     * @param {Number} size The total length of the output string
+     * @param {String} char (optional) The character with which to pad the original string (defaults to empty string &quot; &quot;)
+     * @return {String} The padded string
+     * @static
+     */
+    </span><span class="jsdoc-var">leftPad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ch</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot; &quot;</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">result.length </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ch </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.  Each
+     * token must be unique, and must increment in the format {0}, {1}, etc.  Example usage:
+     * &lt;pre&gt;&lt;code&gt;
+var cls = 'my-class', text = 'Some text';
+var s = String.format('&lt;div class=&quot;{0}&quot;&gt;{1}&lt;/div&gt;', cls, text);
+// s now contains the string: '&lt;div class=&quot;my-class&quot;&gt;Some text&lt;/div&gt;'
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {String} string The tokenized string to be formatted
+     * @param {String} value1 The value to replace token {0}
+     * @param {String} value2 Etc...
+     * @return {String} The formatted string
+     * @static
+     */
+    </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">format.replace</span><span class="jsdoc-syntax">(/\{(\d+)\}/g, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.util.Format.htmlEncode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+        });
+    }
+});
+
+</span><span class="jsdoc-comment">/**
+ * Utility function that allows you to easily switch a string between two alternating values.  The passed value
+ * is compared to the current string, and if they are equal, the other value that was passed in is returned.  If
+ * they are already different, the first value passed in is returned.  Note that this method returns the new value
+ * but does not change the current string.
+ * &lt;pre&gt;&lt;code&gt;
+// alternate sort directions
+sort = sort.toggle('ASC', 'DESC');
+
+// instead of conditional logic:
+sort = (sort == 'ASC' ? 'DESC' : 'ASC');
+&lt;/code&gt;&lt;/pre&gt;
+ * @param {String} value The value to compare to the current string
+ * @param {String} other The new value to use if the string already equals the first value passed in
+ * @return {String} The new value
+ */
+</span><span class="jsdoc-var">String.prototype.toggle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">other</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">other </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
+};</span></code></body></html>
\ No newline at end of file