From: Alan Knowles <alan@roojs.com>
Date: Thu, 17 Jun 2021 04:49:50 +0000 (+0800)
Subject: Fix #6833 - print layer map
X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=242e8cb7d4eb31741bfb8d282303ac36f54dd00e

Fix #6833 - print layer map
---

diff --git a/Roo/Element.js b/Roo/Element.js
index 5d3361fe66..36d6dce660 100644
--- a/Roo/Element.js
+++ b/Roo/Element.js
@@ -614,7 +614,11 @@ if(opt.anim.isAnimated()){
                 }
             }else{
                 if(className && !this.hasClass(className)){
-                    this.dom.className = this.dom.className + " " + className;
+                    if (this.dom instanceof SVGElement) {
+                        this.dom.className.baseVal =this.dom.className.baseVal  + " " + className;
+                    } else {
+                        this.dom.className = this.dom.className + " " + className;
+                    }
                 }
             }
             return this;
@@ -643,7 +647,9 @@ if(opt.anim.isAnimated()){
          * @return {Roo.Element} this
          */
         removeClass : function(className){
-            if(!className || !this.dom.className){
+            
+            var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
+            if(!className || !cn){
                 return this;
             }
             if(className instanceof Array){
@@ -657,8 +663,11 @@ if(opt.anim.isAnimated()){
                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
                        this.classReCache[className] = re;
                     }
-                    this.dom.className =
-                        this.dom.className.replace(re, " ");
+                    if (this.dom instanceof SVGElement) {
+                        this.dom.className.baseVal = cn.replace(re, " ");
+                    } else {
+                        this.dom.className = cn.replace(re, " ");
+                    }
                 }
             }
             return this;
@@ -687,6 +696,9 @@ if(opt.anim.isAnimated()){
          * @return {Boolean} True if the class exists, else false
          */
         hasClass : function(className){
+            if (this.dom instanceof SVGElement) {
+                return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1; 
+            } 
             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
         },
 
diff --git a/Roo/bootstrap/ComboBox.js b/Roo/bootstrap/ComboBox.js
index c482ac50d3..21c9aef32e 100644
--- a/Roo/bootstrap/ComboBox.js
+++ b/Roo/bootstrap/ComboBox.js
@@ -1129,7 +1129,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.inputEl().on('mousedown', this.onTriggerClick,  this);
             this.inputEl().addClass('x-combo-noedit');
         }else{
-            this.inputEl().dom.setAttribute('readOnly', false);
+            this.inputEl().dom.removeAttribute('readOnly');
             this.inputEl().un('mousedown', this.onTriggerClick,  this);
             this.inputEl().removeClass('x-combo-noedit');
         }
diff --git a/Roo/bootstrap/Menu.js b/Roo/bootstrap/Menu.js
index b0f64f4ae9..e5fa5cf2d7 100644
--- a/Roo/bootstrap/Menu.js
+++ b/Roo/bootstrap/Menu.js
@@ -154,19 +154,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         
        // Roo.log("ADD event");
        // Roo.log(this.triggerEl.dom);
+        if (this.triggerEl) {
+            
+            this.triggerEl.on('click', this.onTriggerClick, this);
+            
+            this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
+            
+            if (!this.hideTrigger) {
+                if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
+                    // dropdown toggle on the 'a' in BS4?
+                    this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
+                } else {
+                    this.triggerEl.addClass('dropdown-toggle');
+                }
+            }
+        }
         
-        this.triggerEl.on('click', this.onTriggerClick, this);
-        
-        this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
-        
-	if (!this.hideTrigger) {
-	    if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
-		// dropdown toggle on the 'a' in BS4?
-		this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
-	    } else {
-		this.triggerEl.addClass('dropdown-toggle');
-	    }
-	}
         if (Roo.isTouch) {
             this.el.on('touchstart'  , this.onTouch, this);
         }
@@ -328,7 +331,10 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         //this.el.show();
         this.hideMenuItems();
         this.hidden = false;
-        this.triggerEl.addClass('open');
+	if (this.triggerEl) {
+	    this.triggerEl.addClass('open');
+	}
+        
 	this.el.addClass('show');
         
 	
@@ -367,9 +373,9 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     hide : function(deep)
     {
         if (false === this.fireEvent("beforehide", this)) {
-	    Roo.log("hide canceled");
-	    return;
-	}
+            Roo.log("hide canceled");
+            return;
+        }
         this.hideMenuItems();
         if(this.el && this.isVisible()){
            
@@ -377,8 +383,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
                 this.activeItem.deactivate();
                 this.activeItem = null;
             }
-            this.triggerEl.removeClass('open');;
-	    this.el.removeClass('show');
+            if (this.triggerEl) {
+                this.triggerEl.removeClass('open');
+            }
+            
+            this.el.removeClass('show');
             this.hidden = true;
             this.fireEvent("hide", this);
         }
@@ -423,7 +432,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
             this.hide();
         } else {
             Roo.log('show');
-	     
+            
             this.show(this.triggerEl, this.align, false);
         }
         
diff --git a/docs/src/Roo_Element.js.html b/docs/src/Roo_Element.js.html
index 787257e1ac..af724c2ed7 100644
--- a/docs/src/Roo_Element.js.html
+++ b/docs/src/Roo_Element.js.html
@@ -614,7 +614,11 @@ if(opt.anim.isAnimated()){
                 }
             }</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">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">SVGElement</span><span class="jsdoc-syntax">) {
+                        </span><span class="jsdoc-var">this.dom.className.baseVal </span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">this.dom.className.baseVal  </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">else </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">;
@@ -643,7 +647,9 @@ if(opt.anim.isAnimated()){
          * @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">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">SVGElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dom.className.baseVal </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dom.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">cn</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">){
@@ -657,8 +663,11 @@ if(opt.anim.isAnimated()){
                        </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">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">SVGElement</span><span class="jsdoc-syntax">) {
+                        </span><span class="jsdoc-var">this.dom.className.baseVal </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.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">else </span><span class="jsdoc-syntax">{
+                        </span><span class="jsdoc-var">this.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.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">;
@@ -687,6 +696,9 @@ if(opt.anim.isAnimated()){
          * @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">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">SVGElement</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.baseVal </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-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;
         },
 
diff --git a/docs/src/Roo_bootstrap_ComboBox.js.html b/docs/src/Roo_bootstrap_ComboBox.js.html
index 223da32d9e..99553928f4 100644
--- a/docs/src/Roo_bootstrap_ComboBox.js.html
+++ b/docs/src/Roo_bootstrap_ComboBox.js.html
@@ -1129,7 +1129,7 @@
             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-combo-noedit'</span><span class="jsdoc-syntax">);
         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
-            </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'readOnly'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'readOnly'</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-combo-noedit'</span><span class="jsdoc-syntax">);
         }
diff --git a/docs/src/Roo_bootstrap_Menu.js.html b/docs/src/Roo_bootstrap_Menu.js.html
index 225884dca1..bbcbc95d9e 100644
--- a/docs/src/Roo_bootstrap_Menu.js.html
+++ b/docs/src/Roo_bootstrap_Menu.js.html
@@ -154,19 +154,22 @@
 
        </span><span class="jsdoc-comment">// Roo.log(&quot;ADD event&quot;);
        // Roo.log(this.triggerEl.dom);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">) {
 
-        </span><span class="jsdoc-var">this.triggerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.triggerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 
-        </span><span class="jsdoc-var">this.triggerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerPress</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.triggerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerPress</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.hideTrigger</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'nav-item'</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">this.triggerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-link'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-comment">// dropdown toggle on the 'a' in BS4?
+                    </span><span class="jsdoc-var">this.triggerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-link'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dropdown-toggle'</span><span class="jsdoc-syntax">);
+                } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dropdown-toggle'</span><span class="jsdoc-syntax">);
+                }
+            }
+        }
 
-	</span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hideTrigger</span><span class="jsdoc-syntax">) {
-	    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'nav-item'</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">this.triggerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-link'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
-		</span><span class="jsdoc-comment">// dropdown toggle on the 'a' in BS4?
-		</span><span class="jsdoc-var">this.triggerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-link'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dropdown-toggle'</span><span class="jsdoc-syntax">);
-	    } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
-		</span><span class="jsdoc-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dropdown-toggle'</span><span class="jsdoc-syntax">);
-	    }
-	}
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'  </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouch</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
         }
@@ -328,7 +331,10 @@
         </span><span class="jsdoc-comment">//this.el.show();
         </span><span class="jsdoc-var">this.hideMenuItems</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-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
+	</span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">) {
+	    </span><span class="jsdoc-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
+	}
+
 	</span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
 
 
@@ -367,9 +373,9 @@
     </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">deep</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-keyword">if </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;beforehide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)) {
-	    </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide canceled&quot;</span><span class="jsdoc-syntax">);
-	    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
-	}
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide canceled&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
         </span><span class="jsdoc-var">this.hideMenuItems</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">this.isVisible</span><span class="jsdoc-syntax">()){
 
@@ -377,8 +383,11 @@
                 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
                 </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
             }
-            </span><span class="jsdoc-var">this.triggerEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);;
-	    </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">this.triggerEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
+            }
+
+            </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</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-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">);
         }
diff --git a/roojs-all.js b/roojs-all.js
index 2f622db7e3..c47b57b2b4 100644
--- a/roojs-all.js
+++ b/roojs-all.js
@@ -325,65 +325,66 @@ this.setHeight(1);setTimeout(function(){var O=parseInt(this.dom.scrollHeight,10)
 }else{this.fixDisplay();this.dom.style.visibility=J?"visible":"hidden";}}else{var L=this.dom;var M=this.visibilityMode;if(J){this.setOpacity(.01);this.setVisible(true);}this.anim({opacity:{to:(J?1:0)}},this.preanim(arguments,1),null,.35,'easeIn',function(){if(!J){if(M==El.DISPLAY){L.style.display="none";
 }else{L.style.visibility="hidden";}Roo.get(L).setOpacity(1);}});}return this;},isDisplayed:function(){return this.getStyle("display")!="none";},toggle:function(J){this.setVisible(!this.isVisible(),this.preanim(arguments,0));return this;},setDisplayed:function(J){if(typeof J=="boolean"){J=J?this.originalDisplay:"none";
 }this.setStyle("display",J);return this;},focus:function(){try{this.dom.focus();}catch(e){}return this;},blur:function(){try{this.dom.blur();}catch(e){}return this;},addClass:function(J){if(J instanceof Array){for(var i=0,K=J.length;i<K;i++){this.addClass(J[i]);
-}}else{if(J&&!this.hasClass(J)){this.dom.className=this.dom.className+" "+J;}}return this;},radioClass:function(J){var K=this.dom.parentNode.childNodes;for(var i=0;i<K.length;i++){var s=K[i];if(s.nodeType==1){Roo.get(s).removeClass(J);}}this.addClass(J);return this;
-},removeClass:function(J){if(!J||!this.dom.className){return this;}if(J instanceof Array){for(var i=0,K=J.length;i<K;i++){this.removeClass(J[i]);}}else{if(this.hasClass(J)){var re=this.classReCache[J];if(!re){re=new RegExp('(?:^|\\s+)'+J+'(?:\\s+|$)',"g");
-this.classReCache[J]=re;}this.dom.className=this.dom.className.replace(re," ");}}return this;},classReCache:{},toggleClass:function(J){if(this.hasClass(J)){this.removeClass(J);}else{this.addClass(J);}return this;},hasClass:function(J){return J&&(' '+this.dom.className+' ').indexOf(' '+J+' ')!=-1;
-},replaceClass:function(J,K){this.removeClass(J);this.addClass(K);return this;},getStyles:function(){var a=arguments,J=a.length,r={};for(var i=0;i<J;i++){r[a[i]]=this.getStyle(a[i]);}return r;},getStyle:function(){return G&&G.getComputedStyle?function(J){var el=this.dom,v,cs,K;
-if(J=='float'){J="cssFloat";}if(el.style&&(v=el.style[J])){return v;}if(cs=G.getComputedStyle(el,"")){if(!(K=B[J])){K=B[J]=J.replace(C,F);}return cs[K];}return null;}:function(J){var el=this.dom,v,cs,K;if(J=='opacity'){if(typeof el.style.filter=='string'){var m=el.style.filter.match(/alpha\(opacity=(.*)\)/i);
-if(m){var fv=parseFloat(m[1]);if(!isNaN(fv)){return fv?fv/100:0;}}}return 1;}else if(J=='float'){J="styleFloat";}if(!(K=B[J])){K=B[J]=J.replace(C,F);}if(v=el.style[K]){return v;}if(cs=el.currentStyle){return cs[K];}return null;};}(),setStyle:function(J,K){if(typeof J=="string"){if(J=='float'){this.setStyle(Roo.isIE?'styleFloat':'cssFloat',K);
-return this;}var L;if(!(L=B[J])){L=B[J]=J.replace(C,F);}if(L=='opacity'){this.setOpacity(K);}else{this.dom.style[L]=K;}}else{for(var M in J){if(typeof J[M]!="function"){this.setStyle(M,J[M]);}}}return this;},applyStyles:function(J){Roo.DomHelper.applyStyles(this.dom,J);
-return this;},getX:function(){return D.getX(this.dom);},getY:function(){return D.getY(this.dom);},getXY:function(){return D.getXY(this.dom);},setX:function(x,J){if(!J||!A){D.setX(this.dom,x);}else{this.setXY([x,this.getY()],this.preanim(arguments,1));}return this;
-},setY:function(y,J){if(!J||!A){D.setY(this.dom,y);}else{this.setXY([this.getX(),y],this.preanim(arguments,1));}return this;},setLeft:function(J){this.setStyle("left",this.addUnits(J));return this;},setTop:function(J){this.setStyle("top",this.addUnits(J));
-return this;},setRight:function(J){this.setStyle("right",this.addUnits(J));return this;},setBottom:function(J){this.setStyle("bottom",this.addUnits(J));return this;},setXY:function(J,K){if(!K||!A){D.setXY(this.dom,J);}else{this.anim({points:{to:J}},this.preanim(arguments,1),'motion');
-}return this;},setLocation:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));return this;},moveTo:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));return this;},getRegion:function(){return D.getRegion(this.dom);},getHeight:function(J){var h=this.dom.offsetHeight||0;
-return J!==true?h:h-this.getBorderWidth("tb")-this.getPadding("tb");},getWidth:function(J){var w=this.dom.offsetWidth||0;return J!==true?w:w-this.getBorderWidth("lr")-this.getPadding("lr");},getComputedHeight:function(){var h=Math.max(this.dom.offsetHeight,this.dom.clientHeight);
-if(!h){h=parseInt(this.getStyle('height'),10)||0;if(!this.isBorderBox()){h+=this.getFrameWidth('tb');}}return h;},getComputedWidth:function(){var w=Math.max(this.dom.offsetWidth,this.dom.clientWidth);if(!w){w=parseInt(this.getStyle('width'),10)||0;if(!this.isBorderBox()){w+=this.getFrameWidth('lr');
-}}return w;},getSize:function(J){return {width:this.getWidth(J),height:this.getHeight(J)};},getViewSize:function(){var d=this.dom,J=document,aw=0,ah=0;if(d==J||d==J.body){return {width:D.getViewWidth(),height:D.getViewHeight()};}else{return {width:d.clientWidth,height:d.clientHeight}
-;}},getValue:function(J){return J?parseInt(this.dom.value,10):this.dom.value;},adjustWidth:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("lr")+this.getPadding("lr"));}if(J<0){J=0;}}return J;},adjustHeight:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("tb")+this.getPadding("tb"));
-}if(J<0){J=0;}}return J;},setWidth:function(J,K){J=this.adjustWidth(J);if(!K||!A){this.dom.style.width=this.addUnits(J);}else{this.anim({width:{to:J}},this.preanim(arguments,1));}return this;},setHeight:function(J,K){J=this.adjustHeight(J);if(!K||!A){this.dom.style.height=this.addUnits(J);
-}else{this.anim({height:{to:J}},this.preanim(arguments,1));}return this;},setSize:function(J,K,L){if(typeof J=="object"){K=J.height;J=J.width;}J=this.adjustWidth(J);K=this.adjustHeight(K);if(!L||!A){this.dom.style.width=this.addUnits(J);this.dom.style.height=this.addUnits(K);
-}else{this.anim({width:{to:J},height:{to:K}},this.preanim(arguments,2));}return this;},setBounds:function(x,y,J,K,L){if(!L||!A){this.setSize(J,K);this.setLocation(x,y);}else{J=this.adjustWidth(J);K=this.adjustHeight(K);this.anim({points:{to:[x,y]},width:{to:J}
-,height:{to:K}},this.preanim(arguments,4),'motion');}return this;},setRegion:function(J,K){this.setBounds(J.left,J.top,J.right-J.left,J.bottom-J.top,this.preanim(arguments,1));return this;},addListener:function(J,fn,K,L){if(this.dom){Roo.EventManager.on(this.dom,J,fn,K||this,L);
-}if(J=='dblclick'){this.addListener('touchstart',this.onTapHandler,this);}},tapedTwice:false,onTapHandler:function(J){if(!this.tapedTwice){this.tapedTwice=true;var s=this;setTimeout(function(){s.tapedTwice=false;},300);return;}J.preventDefault();var K=new MouseEvent('dblclick',{view:window,bubbles:true,cancelable:true}
-);this.dom.dispatchEvent(K);},removeListener:function(J,fn){Roo.EventManager.removeListener(this.dom,J,fn);return this;},removeAllListeners:function(){E.purgeElement(this.dom);return this;},relayEvent:function(J,K){this.on(J,function(e){K.fireEvent(J,e);}
-);},setOpacity:function(J,K){if(!K||!A){var s=this.dom.style;if(Roo.isIE){s.zoom=1;s.filter=(s.filter||'').replace(/alpha\([^\)]*\)/gi,"")+(J==1?"":"alpha(opacity="+J*100+")");}else{s.opacity=J;}}else{this.anim({opacity:{to:J}},this.preanim(arguments,1),null,.35,'easeIn');
-}return this;},getLeft:function(J){if(!J){return this.getX();}else{return parseInt(this.getStyle("left"),10)||0;}},getRight:function(J){if(!J){return this.getX()+this.getWidth();}else{return (this.getLeft(true)+this.getWidth())||0;}},getTop:function(J){if(!J){return this.getY();
-}else{return parseInt(this.getStyle("top"),10)||0;}},getBottom:function(J){if(!J){return this.getY()+this.getHeight();}else{return (this.getTop(true)+this.getHeight())||0;}},position:function(J,K,x,y){if(!J){if(this.getStyle('position')=='static'){this.setStyle('position','relative');
-}}else{this.setStyle("position",J);}if(K){this.setStyle("z-index",K);}if(x!==undefined&&y!==undefined){this.setXY([x,y]);}else if(x!==undefined){this.setX(x);}else if(y!==undefined){this.setY(y);}},clearPositioning:function(J){J=J||'';this.setStyle({"left":J,"right":J,"top":J,"bottom":J,"z-index":"","position":"static"}
-);return this;},getPositioning:function(){var l=this.getStyle("left");var t=this.getStyle("top");return {"position":this.getStyle("position"),"left":l,"right":l?"":this.getStyle("right"),"top":t,"bottom":t?"":this.getStyle("bottom"),"z-index":this.getStyle("z-index")}
-;},getBorderWidth:function(J){return this.addStyles(J,El.borders);},getPadding:function(J){return this.addStyles(J,El.paddings);},setPositioning:function(pc){this.applyStyles(pc);if(pc.right=="auto"){this.dom.style.right="";}if(pc.bottom=="auto"){this.dom.style.bottom="";
-}return this;},fixDisplay:function(){if(this.getStyle("display")=="none"){this.setStyle("visibility","hidden");this.setStyle("display",this.originalDisplay);if(this.getStyle("display")=="none"){this.setStyle("display","block");}}},setLeftTop:function(J,K){this.dom.style.left=this.addUnits(J);
-this.dom.style.top=this.addUnits(K);return this;},move:function(J,K,L){var xy=this.getXY();J=J.toLowerCase();switch(J){case "l":case "left":this.moveTo(xy[0]-K,xy[1],this.preanim(arguments,2));break;case "r":case "right":this.moveTo(xy[0]+K,xy[1],this.preanim(arguments,2));
-break;case "t":case "top":case "up":this.moveTo(xy[0],xy[1]-K,this.preanim(arguments,2));break;case "b":case "bottom":case "down":this.moveTo(xy[0],xy[1]+K,this.preanim(arguments,2));break;}return this;},clip:function(){if(!this.isClipped){this.isClipped=true;
-this.originalClip={"o":this.getStyle("overflow"),"x":this.getStyle("overflow-x"),"y":this.getStyle("overflow-y")};this.setStyle("overflow","hidden");this.setStyle("overflow-x","hidden");this.setStyle("overflow-y","hidden");}return this;},unclip:function(){if(this.isClipped){this.isClipped=false;
-var o=this.originalClip;if(o.o){this.setStyle("overflow",o.o);}if(o.x){this.setStyle("overflow-x",o.x);}if(o.y){this.setStyle("overflow-y",o.y);}}return this;},getAnchorXY:function(J,K,s){var w,h,vp=false;if(!s){var d=this.dom;if(d==document.body||d==document){vp=true;
-w=D.getViewWidth();h=D.getViewHeight();}else{w=this.getWidth();h=this.getHeight();}}else{w=s.width;h=s.height;}var x=0,y=0,r=Math.round;switch((J||"tl").toLowerCase()){case "c":x=r(w*.5);y=r(h*.5);break;case "t":x=r(w*.5);y=0;break;case "l":x=0;y=r(h*.5);
-break;case "r":x=w;y=r(h*.5);break;case "b":x=r(w*.5);y=h;break;case "tl":x=0;y=0;break;case "bl":x=0;y=h;break;case "br":x=w;y=h;break;case "tr":x=w;y=0;break;}if(K===true){return [x,y];}if(vp){var sc=this.getScroll();return [x+sc.left,y+sc.top];}var o=this.getXY();
-return [x+o[0],y+o[1]];},getAlignToXY:function(el,p,o){el=Roo.get(el);var d=this.dom;if(!el.dom){throw "Element.alignTo with an element that doesn't exist";}var c=false;var p1="",p2="";o=o||[0,0];if(!p){p="tl-bl";}else if(p=="?"){p="tl-bl?";}else if(p.indexOf("-")==-1){p="tl-"+p;
-}p=p.toLowerCase();var m=p.match(/^([a-z]+)-([a-z]+)(\?)?$/);if(!m){throw "Element.alignTo with an invalid alignment "+p;}p1=m[1];p2=m[2];c=!!m[3];var a1=this.getAnchorXY(p1,true);var a2=el.getAnchorXY(p2,false);var x=a2[0]-a1[0]+o[0];var y=a2[1]-a1[1]+o[1];
-if(c){var w=this.getWidth(),h=this.getHeight(),r=el.getRegion();var dw=D.getViewWidth()-5,dh=D.getViewHeight()-5;var J=p1.charAt(0),K=p1.charAt(p1.length-1);var L=p2.charAt(0),M=p2.charAt(p2.length-1);var N=((J=="t"&&L=="b")||(J=="b"&&L=="t"));var O=((K=="r"&&M=="l")||(K=="l"&&M=="r"));
-var P=document;var Q=(P.documentElement.scrollLeft||P.body.scrollLeft||0)+5;var R=(P.documentElement.scrollTop||P.body.scrollTop||0)+5;if((x+w)>dw+Q){x=O?r.left-w:dw+Q-w;}if(x<Q){x=O?r.right:Q;}if((y+h)>dh+R){y=N?r.top-h:dh+R-h;}if(y<R){y=N?r.bottom:R;}}return [x,y];
-},getConstrainToXY:function(){var os={top:0,left:0,bottom:0,right:0};return function(el,J,K,L){el=Roo.get(el);K=K?Roo.applyIf(K,os):os;var vw,vh,vx=0,vy=0;if(el.dom==document.body||el.dom==document){vw=Roo.lib.Dom.getViewWidth();vh=Roo.lib.Dom.getViewHeight();
-}else{vw=el.dom.clientWidth;vh=el.dom.clientHeight;if(!J){var M=el.getXY();vx=M[0];vy=M[1];}}var s=el.getScroll();vx+=K.left+s.left;vy+=K.top+s.top;vw-=K.right;vh-=K.bottom;var vr=vx+vw;var vb=vy+vh;var xy=L||(!J?this.getXY():[this.getLeft(true),this.getTop(true)]);
-var x=xy[0],y=xy[1];var w=this.dom.offsetWidth,h=this.dom.offsetHeight;var N=false;if((x+w)>vr){x=vr-w;N=true;}if((y+h)>vb){y=vb-h;N=true;}if(x<vx){x=vx;N=true;}if(y<vy){y=vy;N=true;}return N?[x,y]:false;};}(),adjustForConstraints:function(xy,J,K){return this.getConstrainToXY(J||document,false,K,xy)||xy;
-},alignTo:function(J,K,L,M){var xy=this.getAlignToXY(J,K,L);this.setXY(xy,this.preanim(arguments,3));return this;},anchorTo:function(el,J,K,L,M,N){var O=function(){this.alignTo(el,J,K,L);Roo.callback(N,this);};Roo.EventManager.onWindowResize(O,this);var tm=typeof M;
-if(tm!='undefined'){Roo.EventManager.on(window,'scroll',O,this,{buffer:tm=='number'?M:50});}O.call(this);return this;},clearOpacity:function(){if(window.ActiveXObject){if(typeof this.dom.style.filter=='string'&&(/alpha/i).test(this.dom.style.filter)){this.dom.style.filter="";
-}}else{this.dom.style.opacity="";this.dom.style["-moz-opacity"]="";this.dom.style["-khtml-opacity"]="";}return this;},hide:function(J){this.setVisible(false,this.preanim(arguments,0));return this;},show:function(J){this.setVisible(true,this.preanim(arguments,0));
-return this;},addUnits:function(J){return Roo.Element.addUnits(J,this.defaultUnit);},beginMeasure:function(){var el=this.dom;if(el.offsetWidth||el.offsetHeight){return this;}var J=[];var p=this.dom,b=document.body;while((!el.offsetWidth&&!el.offsetHeight)&&p&&p.tagName&&p!=b){var pe=Roo.get(p);
-if(pe.getStyle('display')=='none'){J.push({el:p,visibility:pe.getStyle("visibility")});p.style.visibility="hidden";p.style.display="block";}p=p.parentNode;}this._measureChanged=J;return this;},endMeasure:function(){var J=this._measureChanged;if(J){for(var i=0,K=J.length;
-i<K;i++){var r=J[i];r.el.style.visibility=r.visibility;r.el.style.display="none";}this._measureChanged=null;}return this;},update:function(J,K,L){if(typeof J=="undefined"){J="";}if(K!==true){this.dom.innerHTML=J;if(typeof L=="function"){L();}return this;}
-var id=Roo.id();var M=this.dom;J+='<span id="'+id+'"></span>';E.onAvailable(id,function(){var hd=document.getElementsByTagName("head")[0];var re=/(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;var N=/\ssrc=([\'\"])(.*?)\1/i;var O=/\stype=([\'\"])(.*?)\1/i;
-var P;while(P=re.exec(J)){var Q=P[1];var R=Q?Q.match(N):false;if(R&&R[2]){var s=document.createElement("script");s.src=R[2];var S=Q.match(O);if(S&&S[2]){s.type=S[2];}hd.appendChild(s);}else if(P[2]&&P[2].length>0){if(window.execScript){window.execScript(P[2]);
-}else{window.eval(P[2]);}}}var el=document.getElementById(id);if(el){el.parentNode.removeChild(el);}if(typeof L=="function"){L();}});M.innerHTML=J.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,"");return this;},load:function(){var um=this.getUpdateManager();
-um.update.apply(um,arguments);return this;},getUpdateManager:function(){if(!this.updateManager){this.updateManager=new Roo.UpdateManager(this);}return this.updateManager;},unselectable:function(){this.dom.unselectable="on";this.swallowEvent("selectstart",true);
-this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");this.addClass("x-unselectable");return this;},getCenterXY:function(){return this.getAlignToXY(document,'c-c');},center:function(J){this.alignTo(J||document,'c-c');return this;},isBorderBox:function(){return I[this.dom.tagName.toLowerCase()]||Roo.isBorderBox;
-},getBox:function(J,K){var xy;if(!K){xy=this.getXY();}else{var L=parseInt(this.getStyle("left"),10)||0;var M=parseInt(this.getStyle("top"),10)||0;xy=[L,M];}var el=this.dom,w=el.offsetWidth,h=el.offsetHeight,bx;if(!J){bx={x:xy[0],y:xy[1],0:xy[0],1:xy[1],width:w,height:h}
-;}else{var l=this.getBorderWidth("l")+this.getPadding("l");var r=this.getBorderWidth("r")+this.getPadding("r");var t=this.getBorderWidth("t")+this.getPadding("t");var b=this.getBorderWidth("b")+this.getPadding("b");bx={x:xy[0]+l,y:xy[1]+t,0:xy[0]+l,1:xy[1]+t,width:w-(l+r),height:h-(t+b)}
-;}bx.right=bx.x+bx.width;bx.bottom=bx.y+bx.height;return bx;},getFrameWidth:function(J,K){return K&&Roo.isBorderBox?0:(this.getPadding(J)+this.getBorderWidth(J));},setBox:function(J,K,L){var w=J.width,h=J.height;if((K&&!this.autoBoxAdjust)&&!this.isBorderBox()){w-=(this.getBorderWidth("lr")+this.getPadding("lr"));
-h-=(this.getBorderWidth("tb")+this.getPadding("tb"));}this.setBounds(J.x,J.y,w,h,this.preanim(arguments,2));return this;},repaint:function(){var J=this.dom;this.addClass("x-repaint");setTimeout(function(){Roo.get(J).removeClass("x-repaint");},1);return this;
-},getMargins:function(J){if(!J){return {top:parseInt(this.getStyle("margin-top"),10)||0,left:parseInt(this.getStyle("margin-left"),10)||0,bottom:parseInt(this.getStyle("margin-bottom"),10)||0,right:parseInt(this.getStyle("margin-right"),10)||0};}else{return this.addStyles(J,El.margins);
-}},addStyles:function(J,K){var L=0,v,w;for(var i=0,M=J.length;i<M;i++){v=this.getStyle(K[J.charAt(i)]);if(v){w=parseInt(v,10);if(w){L+=w;}}}return L;},createProxy:function(J,K,L){if(K){K=Roo.getDom(K);}else{K=document.body;}J=typeof J=="object"?J:{tag:"div",cls:J}
-;var M=Roo.DomHelper.append(K,J,true);if(L){M.setBox(this.getBox());}return M;},mask:function(J,K){if(this.getStyle("position")=="static"&&this.dom.tagName!=='BODY'){this.setStyle("position","relative");}if(!this._mask){this._mask=Roo.DomHelper.append(this.dom,{cls:"roo-el-mask"}
+}}else{if(J&&!this.hasClass(J)){if(this.dom instanceof SVGElement){this.dom.className.baseVal=this.dom.className.baseVal+" "+J;}else{this.dom.className=this.dom.className+" "+J;}}}return this;},radioClass:function(J){var K=this.dom.parentNode.childNodes;for(var i=0;
+i<K.length;i++){var s=K[i];if(s.nodeType==1){Roo.get(s).removeClass(J);}}this.addClass(J);return this;},removeClass:function(J){var cn=this.dom instanceof SVGElement?this.dom.className.baseVal:this.dom.className;if(!J||!cn){return this;}if(J instanceof Array){for(var i=0,K=J.length;
+i<K;i++){this.removeClass(J[i]);}}else{if(this.hasClass(J)){var re=this.classReCache[J];if(!re){re=new RegExp('(?:^|\\s+)'+J+'(?:\\s+|$)',"g");this.classReCache[J]=re;}if(this.dom instanceof SVGElement){this.dom.className.baseVal=cn.replace(re," ");}else{this.dom.className=cn.replace(re," ");
+}}}return this;},classReCache:{},toggleClass:function(J){if(this.hasClass(J)){this.removeClass(J);}else{this.addClass(J);}return this;},hasClass:function(J){if(this.dom instanceof SVGElement){return J&&(' '+this.dom.className.baseVal+' ').indexOf(' '+J+' ')!=-1;
+}return J&&(' '+this.dom.className+' ').indexOf(' '+J+' ')!=-1;},replaceClass:function(J,K){this.removeClass(J);this.addClass(K);return this;},getStyles:function(){var a=arguments,J=a.length,r={};for(var i=0;i<J;i++){r[a[i]]=this.getStyle(a[i]);}return r;
+},getStyle:function(){return G&&G.getComputedStyle?function(J){var el=this.dom,v,cs,K;if(J=='float'){J="cssFloat";}if(el.style&&(v=el.style[J])){return v;}if(cs=G.getComputedStyle(el,"")){if(!(K=B[J])){K=B[J]=J.replace(C,F);}return cs[K];}return null;}:function(J){var el=this.dom,v,cs,K;
+if(J=='opacity'){if(typeof el.style.filter=='string'){var m=el.style.filter.match(/alpha\(opacity=(.*)\)/i);if(m){var fv=parseFloat(m[1]);if(!isNaN(fv)){return fv?fv/100:0;}}}return 1;}else if(J=='float'){J="styleFloat";}if(!(K=B[J])){K=B[J]=J.replace(C,F);
+}if(v=el.style[K]){return v;}if(cs=el.currentStyle){return cs[K];}return null;};}(),setStyle:function(J,K){if(typeof J=="string"){if(J=='float'){this.setStyle(Roo.isIE?'styleFloat':'cssFloat',K);return this;}var L;if(!(L=B[J])){L=B[J]=J.replace(C,F);}if(L=='opacity'){this.setOpacity(K);
+}else{this.dom.style[L]=K;}}else{for(var M in J){if(typeof J[M]!="function"){this.setStyle(M,J[M]);}}}return this;},applyStyles:function(J){Roo.DomHelper.applyStyles(this.dom,J);return this;},getX:function(){return D.getX(this.dom);},getY:function(){return D.getY(this.dom);
+},getXY:function(){return D.getXY(this.dom);},setX:function(x,J){if(!J||!A){D.setX(this.dom,x);}else{this.setXY([x,this.getY()],this.preanim(arguments,1));}return this;},setY:function(y,J){if(!J||!A){D.setY(this.dom,y);}else{this.setXY([this.getX(),y],this.preanim(arguments,1));
+}return this;},setLeft:function(J){this.setStyle("left",this.addUnits(J));return this;},setTop:function(J){this.setStyle("top",this.addUnits(J));return this;},setRight:function(J){this.setStyle("right",this.addUnits(J));return this;},setBottom:function(J){this.setStyle("bottom",this.addUnits(J));
+return this;},setXY:function(J,K){if(!K||!A){D.setXY(this.dom,J);}else{this.anim({points:{to:J}},this.preanim(arguments,1),'motion');}return this;},setLocation:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));return this;},moveTo:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));
+return this;},getRegion:function(){return D.getRegion(this.dom);},getHeight:function(J){var h=this.dom.offsetHeight||0;return J!==true?h:h-this.getBorderWidth("tb")-this.getPadding("tb");},getWidth:function(J){var w=this.dom.offsetWidth||0;return J!==true?w:w-this.getBorderWidth("lr")-this.getPadding("lr");
+},getComputedHeight:function(){var h=Math.max(this.dom.offsetHeight,this.dom.clientHeight);if(!h){h=parseInt(this.getStyle('height'),10)||0;if(!this.isBorderBox()){h+=this.getFrameWidth('tb');}}return h;},getComputedWidth:function(){var w=Math.max(this.dom.offsetWidth,this.dom.clientWidth);
+if(!w){w=parseInt(this.getStyle('width'),10)||0;if(!this.isBorderBox()){w+=this.getFrameWidth('lr');}}return w;},getSize:function(J){return {width:this.getWidth(J),height:this.getHeight(J)};},getViewSize:function(){var d=this.dom,J=document,aw=0,ah=0;if(d==J||d==J.body){return {width:D.getViewWidth(),height:D.getViewHeight()}
+;}else{return {width:d.clientWidth,height:d.clientHeight};}},getValue:function(J){return J?parseInt(this.dom.value,10):this.dom.value;},adjustWidth:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("lr")+this.getPadding("lr"));
+}if(J<0){J=0;}}return J;},adjustHeight:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("tb")+this.getPadding("tb"));}if(J<0){J=0;}}return J;},setWidth:function(J,K){J=this.adjustWidth(J);if(!K||!A){this.dom.style.width=this.addUnits(J);
+}else{this.anim({width:{to:J}},this.preanim(arguments,1));}return this;},setHeight:function(J,K){J=this.adjustHeight(J);if(!K||!A){this.dom.style.height=this.addUnits(J);}else{this.anim({height:{to:J}},this.preanim(arguments,1));}return this;},setSize:function(J,K,L){if(typeof J=="object"){K=J.height;
+J=J.width;}J=this.adjustWidth(J);K=this.adjustHeight(K);if(!L||!A){this.dom.style.width=this.addUnits(J);this.dom.style.height=this.addUnits(K);}else{this.anim({width:{to:J},height:{to:K}},this.preanim(arguments,2));}return this;},setBounds:function(x,y,J,K,L){if(!L||!A){this.setSize(J,K);
+this.setLocation(x,y);}else{J=this.adjustWidth(J);K=this.adjustHeight(K);this.anim({points:{to:[x,y]},width:{to:J},height:{to:K}},this.preanim(arguments,4),'motion');}return this;},setRegion:function(J,K){this.setBounds(J.left,J.top,J.right-J.left,J.bottom-J.top,this.preanim(arguments,1));
+return this;},addListener:function(J,fn,K,L){if(this.dom){Roo.EventManager.on(this.dom,J,fn,K||this,L);}if(J=='dblclick'){this.addListener('touchstart',this.onTapHandler,this);}},tapedTwice:false,onTapHandler:function(J){if(!this.tapedTwice){this.tapedTwice=true;
+var s=this;setTimeout(function(){s.tapedTwice=false;},300);return;}J.preventDefault();var K=new MouseEvent('dblclick',{view:window,bubbles:true,cancelable:true});this.dom.dispatchEvent(K);},removeListener:function(J,fn){Roo.EventManager.removeListener(this.dom,J,fn);
+return this;},removeAllListeners:function(){E.purgeElement(this.dom);return this;},relayEvent:function(J,K){this.on(J,function(e){K.fireEvent(J,e);});},setOpacity:function(J,K){if(!K||!A){var s=this.dom.style;if(Roo.isIE){s.zoom=1;s.filter=(s.filter||'').replace(/alpha\([^\)]*\)/gi,"")+(J==1?"":"alpha(opacity="+J*100+")");
+}else{s.opacity=J;}}else{this.anim({opacity:{to:J}},this.preanim(arguments,1),null,.35,'easeIn');}return this;},getLeft:function(J){if(!J){return this.getX();}else{return parseInt(this.getStyle("left"),10)||0;}},getRight:function(J){if(!J){return this.getX()+this.getWidth();
+}else{return (this.getLeft(true)+this.getWidth())||0;}},getTop:function(J){if(!J){return this.getY();}else{return parseInt(this.getStyle("top"),10)||0;}},getBottom:function(J){if(!J){return this.getY()+this.getHeight();}else{return (this.getTop(true)+this.getHeight())||0;
+}},position:function(J,K,x,y){if(!J){if(this.getStyle('position')=='static'){this.setStyle('position','relative');}}else{this.setStyle("position",J);}if(K){this.setStyle("z-index",K);}if(x!==undefined&&y!==undefined){this.setXY([x,y]);}else if(x!==undefined){this.setX(x);
+}else if(y!==undefined){this.setY(y);}},clearPositioning:function(J){J=J||'';this.setStyle({"left":J,"right":J,"top":J,"bottom":J,"z-index":"","position":"static"});return this;},getPositioning:function(){var l=this.getStyle("left");var t=this.getStyle("top");
+return {"position":this.getStyle("position"),"left":l,"right":l?"":this.getStyle("right"),"top":t,"bottom":t?"":this.getStyle("bottom"),"z-index":this.getStyle("z-index")};},getBorderWidth:function(J){return this.addStyles(J,El.borders);},getPadding:function(J){return this.addStyles(J,El.paddings);
+},setPositioning:function(pc){this.applyStyles(pc);if(pc.right=="auto"){this.dom.style.right="";}if(pc.bottom=="auto"){this.dom.style.bottom="";}return this;},fixDisplay:function(){if(this.getStyle("display")=="none"){this.setStyle("visibility","hidden");
+this.setStyle("display",this.originalDisplay);if(this.getStyle("display")=="none"){this.setStyle("display","block");}}},setLeftTop:function(J,K){this.dom.style.left=this.addUnits(J);this.dom.style.top=this.addUnits(K);return this;},move:function(J,K,L){var xy=this.getXY();
+J=J.toLowerCase();switch(J){case "l":case "left":this.moveTo(xy[0]-K,xy[1],this.preanim(arguments,2));break;case "r":case "right":this.moveTo(xy[0]+K,xy[1],this.preanim(arguments,2));break;case "t":case "top":case "up":this.moveTo(xy[0],xy[1]-K,this.preanim(arguments,2));
+break;case "b":case "bottom":case "down":this.moveTo(xy[0],xy[1]+K,this.preanim(arguments,2));break;}return this;},clip:function(){if(!this.isClipped){this.isClipped=true;this.originalClip={"o":this.getStyle("overflow"),"x":this.getStyle("overflow-x"),"y":this.getStyle("overflow-y")}
+;this.setStyle("overflow","hidden");this.setStyle("overflow-x","hidden");this.setStyle("overflow-y","hidden");}return this;},unclip:function(){if(this.isClipped){this.isClipped=false;var o=this.originalClip;if(o.o){this.setStyle("overflow",o.o);}if(o.x){this.setStyle("overflow-x",o.x);
+}if(o.y){this.setStyle("overflow-y",o.y);}}return this;},getAnchorXY:function(J,K,s){var w,h,vp=false;if(!s){var d=this.dom;if(d==document.body||d==document){vp=true;w=D.getViewWidth();h=D.getViewHeight();}else{w=this.getWidth();h=this.getHeight();}}else{w=s.width;
+h=s.height;}var x=0,y=0,r=Math.round;switch((J||"tl").toLowerCase()){case "c":x=r(w*.5);y=r(h*.5);break;case "t":x=r(w*.5);y=0;break;case "l":x=0;y=r(h*.5);break;case "r":x=w;y=r(h*.5);break;case "b":x=r(w*.5);y=h;break;case "tl":x=0;y=0;break;case "bl":x=0;
+y=h;break;case "br":x=w;y=h;break;case "tr":x=w;y=0;break;}if(K===true){return [x,y];}if(vp){var sc=this.getScroll();return [x+sc.left,y+sc.top];}var o=this.getXY();return [x+o[0],y+o[1]];},getAlignToXY:function(el,p,o){el=Roo.get(el);var d=this.dom;if(!el.dom){throw "Element.alignTo with an element that doesn't exist";
+}var c=false;var p1="",p2="";o=o||[0,0];if(!p){p="tl-bl";}else if(p=="?"){p="tl-bl?";}else if(p.indexOf("-")==-1){p="tl-"+p;}p=p.toLowerCase();var m=p.match(/^([a-z]+)-([a-z]+)(\?)?$/);if(!m){throw "Element.alignTo with an invalid alignment "+p;}p1=m[1];p2=m[2];
+c=!!m[3];var a1=this.getAnchorXY(p1,true);var a2=el.getAnchorXY(p2,false);var x=a2[0]-a1[0]+o[0];var y=a2[1]-a1[1]+o[1];if(c){var w=this.getWidth(),h=this.getHeight(),r=el.getRegion();var dw=D.getViewWidth()-5,dh=D.getViewHeight()-5;var J=p1.charAt(0),K=p1.charAt(p1.length-1);
+var L=p2.charAt(0),M=p2.charAt(p2.length-1);var N=((J=="t"&&L=="b")||(J=="b"&&L=="t"));var O=((K=="r"&&M=="l")||(K=="l"&&M=="r"));var P=document;var Q=(P.documentElement.scrollLeft||P.body.scrollLeft||0)+5;var R=(P.documentElement.scrollTop||P.body.scrollTop||0)+5;
+if((x+w)>dw+Q){x=O?r.left-w:dw+Q-w;}if(x<Q){x=O?r.right:Q;}if((y+h)>dh+R){y=N?r.top-h:dh+R-h;}if(y<R){y=N?r.bottom:R;}}return [x,y];},getConstrainToXY:function(){var os={top:0,left:0,bottom:0,right:0};return function(el,J,K,L){el=Roo.get(el);K=K?Roo.applyIf(K,os):os;
+var vw,vh,vx=0,vy=0;if(el.dom==document.body||el.dom==document){vw=Roo.lib.Dom.getViewWidth();vh=Roo.lib.Dom.getViewHeight();}else{vw=el.dom.clientWidth;vh=el.dom.clientHeight;if(!J){var M=el.getXY();vx=M[0];vy=M[1];}}var s=el.getScroll();vx+=K.left+s.left;
+vy+=K.top+s.top;vw-=K.right;vh-=K.bottom;var vr=vx+vw;var vb=vy+vh;var xy=L||(!J?this.getXY():[this.getLeft(true),this.getTop(true)]);var x=xy[0],y=xy[1];var w=this.dom.offsetWidth,h=this.dom.offsetHeight;var N=false;if((x+w)>vr){x=vr-w;N=true;}if((y+h)>vb){y=vb-h;
+N=true;}if(x<vx){x=vx;N=true;}if(y<vy){y=vy;N=true;}return N?[x,y]:false;};}(),adjustForConstraints:function(xy,J,K){return this.getConstrainToXY(J||document,false,K,xy)||xy;},alignTo:function(J,K,L,M){var xy=this.getAlignToXY(J,K,L);this.setXY(xy,this.preanim(arguments,3));
+return this;},anchorTo:function(el,J,K,L,M,N){var O=function(){this.alignTo(el,J,K,L);Roo.callback(N,this);};Roo.EventManager.onWindowResize(O,this);var tm=typeof M;if(tm!='undefined'){Roo.EventManager.on(window,'scroll',O,this,{buffer:tm=='number'?M:50});
+}O.call(this);return this;},clearOpacity:function(){if(window.ActiveXObject){if(typeof this.dom.style.filter=='string'&&(/alpha/i).test(this.dom.style.filter)){this.dom.style.filter="";}}else{this.dom.style.opacity="";this.dom.style["-moz-opacity"]="";this.dom.style["-khtml-opacity"]="";
+}return this;},hide:function(J){this.setVisible(false,this.preanim(arguments,0));return this;},show:function(J){this.setVisible(true,this.preanim(arguments,0));return this;},addUnits:function(J){return Roo.Element.addUnits(J,this.defaultUnit);},beginMeasure:function(){var el=this.dom;
+if(el.offsetWidth||el.offsetHeight){return this;}var J=[];var p=this.dom,b=document.body;while((!el.offsetWidth&&!el.offsetHeight)&&p&&p.tagName&&p!=b){var pe=Roo.get(p);if(pe.getStyle('display')=='none'){J.push({el:p,visibility:pe.getStyle("visibility")}
+);p.style.visibility="hidden";p.style.display="block";}p=p.parentNode;}this._measureChanged=J;return this;},endMeasure:function(){var J=this._measureChanged;if(J){for(var i=0,K=J.length;i<K;i++){var r=J[i];r.el.style.visibility=r.visibility;r.el.style.display="none";
+}this._measureChanged=null;}return this;},update:function(J,K,L){if(typeof J=="undefined"){J="";}if(K!==true){this.dom.innerHTML=J;if(typeof L=="function"){L();}return this;}var id=Roo.id();var M=this.dom;J+='<span id="'+id+'"></span>';E.onAvailable(id,function(){var hd=document.getElementsByTagName("head")[0];
+var re=/(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;var N=/\ssrc=([\'\"])(.*?)\1/i;var O=/\stype=([\'\"])(.*?)\1/i;var P;while(P=re.exec(J)){var Q=P[1];var R=Q?Q.match(N):false;if(R&&R[2]){var s=document.createElement("script");s.src=R[2];var S=Q.match(O);
+if(S&&S[2]){s.type=S[2];}hd.appendChild(s);}else if(P[2]&&P[2].length>0){if(window.execScript){window.execScript(P[2]);}else{window.eval(P[2]);}}}var el=document.getElementById(id);if(el){el.parentNode.removeChild(el);}if(typeof L=="function"){L();}});M.innerHTML=J.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,"");
+return this;},load:function(){var um=this.getUpdateManager();um.update.apply(um,arguments);return this;},getUpdateManager:function(){if(!this.updateManager){this.updateManager=new Roo.UpdateManager(this);}return this.updateManager;},unselectable:function(){this.dom.unselectable="on";
+this.swallowEvent("selectstart",true);this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");this.addClass("x-unselectable");return this;},getCenterXY:function(){return this.getAlignToXY(document,'c-c');},center:function(J){this.alignTo(J||document,'c-c');
+return this;},isBorderBox:function(){return I[this.dom.tagName.toLowerCase()]||Roo.isBorderBox;},getBox:function(J,K){var xy;if(!K){xy=this.getXY();}else{var L=parseInt(this.getStyle("left"),10)||0;var M=parseInt(this.getStyle("top"),10)||0;xy=[L,M];}var el=this.dom,w=el.offsetWidth,h=el.offsetHeight,bx;
+if(!J){bx={x:xy[0],y:xy[1],0:xy[0],1:xy[1],width:w,height:h};}else{var l=this.getBorderWidth("l")+this.getPadding("l");var r=this.getBorderWidth("r")+this.getPadding("r");var t=this.getBorderWidth("t")+this.getPadding("t");var b=this.getBorderWidth("b")+this.getPadding("b");
+bx={x:xy[0]+l,y:xy[1]+t,0:xy[0]+l,1:xy[1]+t,width:w-(l+r),height:h-(t+b)};}bx.right=bx.x+bx.width;bx.bottom=bx.y+bx.height;return bx;},getFrameWidth:function(J,K){return K&&Roo.isBorderBox?0:(this.getPadding(J)+this.getBorderWidth(J));},setBox:function(J,K,L){var w=J.width,h=J.height;
+if((K&&!this.autoBoxAdjust)&&!this.isBorderBox()){w-=(this.getBorderWidth("lr")+this.getPadding("lr"));h-=(this.getBorderWidth("tb")+this.getPadding("tb"));}this.setBounds(J.x,J.y,w,h,this.preanim(arguments,2));return this;},repaint:function(){var J=this.dom;
+this.addClass("x-repaint");setTimeout(function(){Roo.get(J).removeClass("x-repaint");},1);return this;},getMargins:function(J){if(!J){return {top:parseInt(this.getStyle("margin-top"),10)||0,left:parseInt(this.getStyle("margin-left"),10)||0,bottom:parseInt(this.getStyle("margin-bottom"),10)||0,right:parseInt(this.getStyle("margin-right"),10)||0}
+;}else{return this.addStyles(J,El.margins);}},addStyles:function(J,K){var L=0,v,w;for(var i=0,M=J.length;i<M;i++){v=this.getStyle(K[J.charAt(i)]);if(v){w=parseInt(v,10);if(w){L+=w;}}}return L;},createProxy:function(J,K,L){if(K){K=Roo.getDom(K);}else{K=document.body;
+}J=typeof J=="object"?J:{tag:"div",cls:J};var M=Roo.DomHelper.append(K,J,true);if(L){M.setBox(this.getBox());}return M;},mask:function(J,K){if(this.getStyle("position")=="static"&&this.dom.tagName!=='BODY'){this.setStyle("position","relative");}if(!this._mask){this._mask=Roo.DomHelper.append(this.dom,{cls:"roo-el-mask"}
 ,true);}this.addClass("x-masked");this._mask.setDisplayed(true);var z=0;var L=this.dom;while(L&&L.style){if(!isNaN(parseInt(L.style.zIndex))){z=Math.max(z,parseInt(L.style.zIndex));}L=L.parentNode;}if(this.dom==document.body){z=1000000;this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());}if(typeof J=='string'){if(!this._maskMsg){this._maskMsg=Roo.DomHelper.append(this.dom,{cls:"roo-el-mask-msg",cn:[{tag:'i',cls:'fa fa-spinner fa-spin'},{tag:'div'}]},true);}var mm=this._maskMsg;mm.dom.className=K?"roo-el-mask-msg "+K:"roo-el-mask-msg";
 if(mm.dom.lastChild){mm.dom.lastChild.innerHTML=J;}mm.setDisplayed(true);mm.center(this);mm.setStyle('z-index',z+102);}if(Roo.isIE&&!(Roo.isIE7&&Roo.isStrict)&&this.getStyle('height')=='auto'){this._mask.setHeight(this.getHeight());}this._mask.setStyle('z-index',z+100);
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index e9febac739..b945def6cb 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -3720,19 +3720,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         
        // Roo.log("ADD event");
        // Roo.log(this.triggerEl.dom);
+        if (this.triggerEl) {
+            
+            this.triggerEl.on('click', this.onTriggerClick, this);
+            
+            this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
+            
+            if (!this.hideTrigger) {
+                if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
+                    // dropdown toggle on the 'a' in BS4?
+                    this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
+                } else {
+                    this.triggerEl.addClass('dropdown-toggle');
+                }
+            }
+        }
         
-        this.triggerEl.on('click', this.onTriggerClick, this);
-        
-        this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
-        
-	if (!this.hideTrigger) {
-	    if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
-		// dropdown toggle on the 'a' in BS4?
-		this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
-	    } else {
-		this.triggerEl.addClass('dropdown-toggle');
-	    }
-	}
         if (Roo.isTouch) {
             this.el.on('touchstart'  , this.onTouch, this);
         }
@@ -3894,7 +3897,10 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         //this.el.show();
         this.hideMenuItems();
         this.hidden = false;
-        this.triggerEl.addClass('open');
+	if (this.triggerEl) {
+	    this.triggerEl.addClass('open');
+	}
+        
 	this.el.addClass('show');
         
 	
@@ -3933,9 +3939,9 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     hide : function(deep)
     {
         if (false === this.fireEvent("beforehide", this)) {
-	    Roo.log("hide canceled");
-	    return;
-	}
+            Roo.log("hide canceled");
+            return;
+        }
         this.hideMenuItems();
         if(this.el && this.isVisible()){
            
@@ -3943,8 +3949,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
                 this.activeItem.deactivate();
                 this.activeItem = null;
             }
-            this.triggerEl.removeClass('open');;
-	    this.el.removeClass('show');
+            if (this.triggerEl) {
+                this.triggerEl.removeClass('open');
+            }
+            
+            this.el.removeClass('show');
             this.hidden = true;
             this.fireEvent("hide", this);
         }
@@ -3989,7 +3998,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
             this.hide();
         } else {
             Roo.log('show');
-	     
+            
             this.show(this.triggerEl, this.align, false);
         }
         
@@ -16374,7 +16383,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.inputEl().on('mousedown', this.onTriggerClick,  this);
             this.inputEl().addClass('x-combo-noedit');
         }else{
-            this.inputEl().dom.setAttribute('readOnly', false);
+            this.inputEl().dom.removeAttribute('readOnly');
             this.inputEl().un('mousedown', this.onTriggerClick,  this);
             this.inputEl().removeClass('x-combo-noedit');
         }
diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index cf57021b79..821af661f2 100644
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -154,17 +154,17 @@ if(g){C[g].remove(F);F.un("beforecheckchange",onBeforeCheck);}}};}();
 // Roo/bootstrap/Menu.js
 Roo.bootstrap.Menu=function(A){if(A.type=='treeview'){this.container_method='getChildContainer';}Roo.bootstrap.Menu.superclass.constructor.call(this,A);if(this.registerMenu&&this.type!='treeview'){Roo.bootstrap.MenuMgr.register(this);}this.addEvents({beforeshow:true,beforehide:true,show:true,hide:true,click:true,mouseover:true,mouseout:true,itemclick:true}
 );this.menuitems=new Roo.util.MixedCollection(false,function(o){return o.el.id;});};Roo.extend(Roo.bootstrap.Menu,Roo.bootstrap.Component,{triggerEl:false,type:false,registerMenu:true,menuItems:false,hidden:true,parentMenu:false,stopEvent:true,isLink:false,container_method:'getDocumentBody',hideTrigger:false,align:'tl-bl?',getChildContainer:function(){return this.el;
-},getAutoCreate:function(){var A={tag:'ul',cls:'dropdown-menu shadow',style:'z-index:1000'};if(this.type==='submenu'){A.cls='submenu active';}if(this.type==='treeview'){A.cls='treeview-menu';}return A;},initEvents:function(){this.triggerEl.on('click',this.onTriggerClick,this);
+},getAutoCreate:function(){var A={tag:'ul',cls:'dropdown-menu shadow',style:'z-index:1000'};if(this.type==='submenu'){A.cls='submenu active';}if(this.type==='treeview'){A.cls='treeview-menu';}return A;},initEvents:function(){if(this.triggerEl){this.triggerEl.on('click',this.onTriggerClick,this);
 this.triggerEl.on(Roo.isTouch?'touchstart':'mouseup',this.onTriggerPress,this);if(!this.hideTrigger){if(this.triggerEl.hasClass('nav-item')&&this.triggerEl.select('.nav-link',true).length){this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
-}else{this.triggerEl.addClass('dropdown-toggle');}}if(Roo.isTouch){this.el.on('touchstart',this.onTouch,this);}this.el.on('click',this.onClick,this);this.el.on("mouseover",this.onMouseOver,this);this.el.on("mouseout",this.onMouseOut,this);},findTargetItem:function(e){var t=e.getTarget(".dropdown-menu-item",this.el,true);
+}else{this.triggerEl.addClass('dropdown-toggle');}}}if(Roo.isTouch){this.el.on('touchstart',this.onTouch,this);}this.el.on('click',this.onClick,this);this.el.on("mouseover",this.onMouseOver,this);this.el.on("mouseout",this.onMouseOut,this);},findTargetItem:function(e){var t=e.getTarget(".dropdown-menu-item",this.el,true);
 if(!t){return false;}if(t&&t.id){return this.menuitems.get(t.id);}return false;},onTouch:function(e){Roo.log("menu.onTouch");this.onClick(e);},onClick:function(e){Roo.log("menu.onClick");var t=this.findTargetItem(e);if(!t||t.isContainer){return;}Roo.log(e);
 Roo.log('pass click event');t.onClick(e);this.fireEvent("click",this,t,e);var A=this;if(!t.href.length||t.href=='#'){(function(){A.hide();}).defer(100);}},onMouseOver:function(e){var t=this.findTargetItem(e);this.fireEvent("mouseover",this,e,t);},isVisible:function(){return !this.hidden;
 },onMouseOut:function(e){var t=this.findTargetItem(e);this.fireEvent("mouseout",this,e,t);},show:function(el,A,B){if(false===this.fireEvent("beforeshow",this)){Roo.log("show canceled");return;}this.parentMenu=B;if(!this.el){this.render();}this.el.addClass('show');
 var xy=this.el.getAlignToXY(el,A);if(this.el.getWidth()+xy[0]>=Roo.lib.Dom.getViewWidth()){xy=this.el.getAlignToXY(el,this.align.replace('/l/g','r'))}if(xy[0]<0){xy=this.el.getAlignToXY(el,this.align.replace('/r/g','l'))}if(this.el.getHeight()+xy[1]>=Roo.lib.Dom.getViewHeight()||xy[1]<0){var a=this.align.replace('?','').split('-');
-xy=this.el.getAlignToXY(el,a[1]+'-'+a[0]+'?')}this.showAt(xy,B,false);},showAt:function(xy,A,_e){this.parentMenu=A;if(!this.el){this.render();}if(_e!==false){this.fireEvent("beforeshow",this);}this.hideMenuItems();this.hidden=false;this.triggerEl.addClass('open');
-this.el.addClass('show');if(this.el.getStyle('top')!='auto'&&this.el.getStyle('top').slice(-1)!="%"){this.el.setXY(xy);}this.focus();this.fireEvent("show",this);},focus:function(){return;if(!this.hidden){this.doFocus.defer(50,this);}},doFocus:function(){if(!this.hidden){this.focusEl.focus();
-}},hide:function(A){if(false===this.fireEvent("beforehide",this)){Roo.log("hide canceled");return;}this.hideMenuItems();if(this.el&&this.isVisible()){if(this.activeItem){this.activeItem.deactivate();this.activeItem=null;}this.triggerEl.removeClass('open');
-;this.el.removeClass('show');this.hidden=true;this.fireEvent("hide",this);}if(A===true&&this.parentMenu){this.parentMenu.hide(true);}},onTriggerClick:function(e){Roo.log('trigger click');var A=e.getTarget();Roo.log(A.nodeName.toLowerCase());if(A.nodeName.toLowerCase()==='i'){e.preventDefault();
+xy=this.el.getAlignToXY(el,a[1]+'-'+a[0]+'?')}this.showAt(xy,B,false);},showAt:function(xy,A,_e){this.parentMenu=A;if(!this.el){this.render();}if(_e!==false){this.fireEvent("beforeshow",this);}this.hideMenuItems();this.hidden=false;if(this.triggerEl){this.triggerEl.addClass('open');
+}this.el.addClass('show');if(this.el.getStyle('top')!='auto'&&this.el.getStyle('top').slice(-1)!="%"){this.el.setXY(xy);}this.focus();this.fireEvent("show",this);},focus:function(){return;if(!this.hidden){this.doFocus.defer(50,this);}},doFocus:function(){if(!this.hidden){this.focusEl.focus();
+}},hide:function(A){if(false===this.fireEvent("beforehide",this)){Roo.log("hide canceled");return;}this.hideMenuItems();if(this.el&&this.isVisible()){if(this.activeItem){this.activeItem.deactivate();this.activeItem=null;}if(this.triggerEl){this.triggerEl.removeClass('open');
+}this.el.removeClass('show');this.hidden=true;this.fireEvent("hide",this);}if(A===true&&this.parentMenu){this.parentMenu.hide(true);}},onTriggerClick:function(e){Roo.log('trigger click');var A=e.getTarget();Roo.log(A.nodeName.toLowerCase());if(A.nodeName.toLowerCase()==='i'){e.preventDefault();
 }},onTriggerPress:function(e){Roo.log('trigger press');var A=Roo.get(e.getTarget());if(A.findParent('.dropdown-menu')||A.findParent('.treeview-menu')){Roo.log('is treeview or dropdown?');return;}if(e.getTarget().nodeName.toLowerCase()!=='i'&&this.isLink){return;
 }if(this.isVisible()){Roo.log('hide');this.hide();}else{Roo.log('show');this.show(this.triggerEl,this.align,false);}if(this.stopEvent||e.getTarget().nodeName.toLowerCase()==='i'){e.stopEvent();}},hideMenuItems:function(){Roo.log("hide Menu Items");if(!this.el){return;
 }this.el.select('.open',true).each(function(aa){aa.removeClass('open');});},addxtypeChild:function(A,B){var C=Roo.bootstrap.Menu.superclass.addxtypeChild.call(this,A,B);this.menuitems.add(C);return C;},getEl:function(){Roo.log(this.el);return this.el;},clear:function(){this.getEl().dom.innerHTML='';
@@ -663,9 +663,9 @@ this.store.on('loadexception',this.onLoadException,this);if(this.editable){this.
 }this.indicator=this.indicatorEl();if(this.indicator){this.indicator.setVisibilityMode(Roo.Element.DISPLAY);this.indicator.hide();}},onDestroy:function(){if(this.view){this.view.setStore(null);this.view.el.removeAllListeners();this.view.el.remove();this.view.purgeListeners();
 }if(this.list){this.list.dom.innerHTML='';}if(this.store){this.store.un('beforeload',this.onBeforeLoad,this);this.store.un('load',this.onLoad,this);this.store.un('loadexception',this.onLoadException,this);}Roo.bootstrap.ComboBox.superclass.onDestroy.call(this);
 },fireKey:function(e){if(e.isNavKeyPress()&&!this.list.isVisible()){this.fireEvent("specialkey",this,e);}},onResize:function(w,h){},setEditable:function(A){if(A==this.editable){return;}this.editable=A;if(!A){this.inputEl().dom.setAttribute('readOnly',true);
-this.inputEl().on('mousedown',this.onTriggerClick,this);this.inputEl().addClass('x-combo-noedit');}else{this.inputEl().dom.setAttribute('readOnly',false);this.inputEl().un('mousedown',this.onTriggerClick,this);this.inputEl().removeClass('x-combo-noedit');
-}},onBeforeLoad:function(A,B){if(!this.hasFocus){return;}if(!B.add){this.list.dom.innerHTML='<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>';}this.restrictHeight();this.selectedIndex=-1;},onLoad:function(){this.hasQuery=false;if(!this.hasFocus){return;
-}if(typeof(this.loading)!=='undefined'&&this.loading!==null){this.loading.hide();}if(this.store.getCount()>0){this.expand();this.restrictHeight();if(this.lastQuery==this.allQuery){if(this.editable&&!this.tickable){this.inputEl().dom.select();}if(!this.selectByValue(this.value,true)&&this.autoFocus&&(!this.store.lastOptions||typeof(this.store.lastOptions.add)=='undefined'||this.store.lastOptions.add!=true)){this.select(0,true);
+this.inputEl().on('mousedown',this.onTriggerClick,this);this.inputEl().addClass('x-combo-noedit');}else{this.inputEl().dom.removeAttribute('readOnly');this.inputEl().un('mousedown',this.onTriggerClick,this);this.inputEl().removeClass('x-combo-noedit');}},onBeforeLoad:function(A,B){if(!this.hasFocus){return;
+}if(!B.add){this.list.dom.innerHTML='<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>';}this.restrictHeight();this.selectedIndex=-1;},onLoad:function(){this.hasQuery=false;if(!this.hasFocus){return;}if(typeof(this.loading)!=='undefined'&&this.loading!==null){this.loading.hide();
+}if(this.store.getCount()>0){this.expand();this.restrictHeight();if(this.lastQuery==this.allQuery){if(this.editable&&!this.tickable){this.inputEl().dom.select();}if(!this.selectByValue(this.value,true)&&this.autoFocus&&(!this.store.lastOptions||typeof(this.store.lastOptions.add)=='undefined'||this.store.lastOptions.add!=true)){this.select(0,true);
 }}else{if(this.autoFocus){this.selectNext();}if(this.typeAhead&&this.lastKey!=Roo.EventObject.BACKSPACE&&this.lastKey!=Roo.EventObject.DELETE){this.taTask.delay(this.typeAheadDelay);}}}else{this.onEmptyResults();}},onLoadException:function(){this.hasQuery=false;
 if(typeof(this.loading)!=='undefined'&&this.loading!==null){this.loading.hide();}if(this.tickable&&this.editable){return;}this.collapse();},onTypeAhead:function(){if(this.store.getCount()>0){var r=this.store.getAt(0);var A=r.data[this.displayField];var B=A.length;
 var C=this.getRawValue().length;if(C!=B){this.setRawValue(A);this.selectText(C,A.length);}}},onSelect:function(A,B){if(this.fireEvent('beforeselect',this,A,B)!==false){this.setFromData(B>-1?A.data:false);this.collapse();this.fireEvent('select',this,A,B);}
diff --git a/roojs-core-debug.js b/roojs-core-debug.js
index cb3923e536..54d7ab7777 100644
--- a/roojs-core-debug.js
+++ b/roojs-core-debug.js
@@ -7675,7 +7675,11 @@ if(opt.anim.isAnimated()){
                 }
             }else{
                 if(className && !this.hasClass(className)){
-                    this.dom.className = this.dom.className + " " + className;
+                    if (this.dom instanceof SVGElement) {
+                        this.dom.className.baseVal =this.dom.className.baseVal  + " " + className;
+                    } else {
+                        this.dom.className = this.dom.className + " " + className;
+                    }
                 }
             }
             return this;
@@ -7704,7 +7708,9 @@ if(opt.anim.isAnimated()){
          * @return {Roo.Element} this
          */
         removeClass : function(className){
-            if(!className || !this.dom.className){
+            
+            var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
+            if(!className || !cn){
                 return this;
             }
             if(className instanceof Array){
@@ -7718,8 +7724,11 @@ if(opt.anim.isAnimated()){
                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
                        this.classReCache[className] = re;
                     }
-                    this.dom.className =
-                        this.dom.className.replace(re, " ");
+                    if (this.dom instanceof SVGElement) {
+                        this.dom.className.baseVal = cn.replace(re, " ");
+                    } else {
+                        this.dom.className = cn.replace(re, " ");
+                    }
                 }
             }
             return this;
@@ -7748,6 +7757,9 @@ if(opt.anim.isAnimated()){
          * @return {Boolean} True if the class exists, else false
          */
         hasClass : function(className){
+            if (this.dom instanceof SVGElement) {
+                return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1; 
+            } 
             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
         },
 
diff --git a/roojs-core.js b/roojs-core.js
index 32bf87b900..1f18081009 100644
--- a/roojs-core.js
+++ b/roojs-core.js
@@ -325,65 +325,66 @@ this.setHeight(1);setTimeout(function(){var O=parseInt(this.dom.scrollHeight,10)
 }else{this.fixDisplay();this.dom.style.visibility=J?"visible":"hidden";}}else{var L=this.dom;var M=this.visibilityMode;if(J){this.setOpacity(.01);this.setVisible(true);}this.anim({opacity:{to:(J?1:0)}},this.preanim(arguments,1),null,.35,'easeIn',function(){if(!J){if(M==El.DISPLAY){L.style.display="none";
 }else{L.style.visibility="hidden";}Roo.get(L).setOpacity(1);}});}return this;},isDisplayed:function(){return this.getStyle("display")!="none";},toggle:function(J){this.setVisible(!this.isVisible(),this.preanim(arguments,0));return this;},setDisplayed:function(J){if(typeof J=="boolean"){J=J?this.originalDisplay:"none";
 }this.setStyle("display",J);return this;},focus:function(){try{this.dom.focus();}catch(e){}return this;},blur:function(){try{this.dom.blur();}catch(e){}return this;},addClass:function(J){if(J instanceof Array){for(var i=0,K=J.length;i<K;i++){this.addClass(J[i]);
-}}else{if(J&&!this.hasClass(J)){this.dom.className=this.dom.className+" "+J;}}return this;},radioClass:function(J){var K=this.dom.parentNode.childNodes;for(var i=0;i<K.length;i++){var s=K[i];if(s.nodeType==1){Roo.get(s).removeClass(J);}}this.addClass(J);return this;
-},removeClass:function(J){if(!J||!this.dom.className){return this;}if(J instanceof Array){for(var i=0,K=J.length;i<K;i++){this.removeClass(J[i]);}}else{if(this.hasClass(J)){var re=this.classReCache[J];if(!re){re=new RegExp('(?:^|\\s+)'+J+'(?:\\s+|$)',"g");
-this.classReCache[J]=re;}this.dom.className=this.dom.className.replace(re," ");}}return this;},classReCache:{},toggleClass:function(J){if(this.hasClass(J)){this.removeClass(J);}else{this.addClass(J);}return this;},hasClass:function(J){return J&&(' '+this.dom.className+' ').indexOf(' '+J+' ')!=-1;
-},replaceClass:function(J,K){this.removeClass(J);this.addClass(K);return this;},getStyles:function(){var a=arguments,J=a.length,r={};for(var i=0;i<J;i++){r[a[i]]=this.getStyle(a[i]);}return r;},getStyle:function(){return G&&G.getComputedStyle?function(J){var el=this.dom,v,cs,K;
-if(J=='float'){J="cssFloat";}if(el.style&&(v=el.style[J])){return v;}if(cs=G.getComputedStyle(el,"")){if(!(K=B[J])){K=B[J]=J.replace(C,F);}return cs[K];}return null;}:function(J){var el=this.dom,v,cs,K;if(J=='opacity'){if(typeof el.style.filter=='string'){var m=el.style.filter.match(/alpha\(opacity=(.*)\)/i);
-if(m){var fv=parseFloat(m[1]);if(!isNaN(fv)){return fv?fv/100:0;}}}return 1;}else if(J=='float'){J="styleFloat";}if(!(K=B[J])){K=B[J]=J.replace(C,F);}if(v=el.style[K]){return v;}if(cs=el.currentStyle){return cs[K];}return null;};}(),setStyle:function(J,K){if(typeof J=="string"){if(J=='float'){this.setStyle(Roo.isIE?'styleFloat':'cssFloat',K);
-return this;}var L;if(!(L=B[J])){L=B[J]=J.replace(C,F);}if(L=='opacity'){this.setOpacity(K);}else{this.dom.style[L]=K;}}else{for(var M in J){if(typeof J[M]!="function"){this.setStyle(M,J[M]);}}}return this;},applyStyles:function(J){Roo.DomHelper.applyStyles(this.dom,J);
-return this;},getX:function(){return D.getX(this.dom);},getY:function(){return D.getY(this.dom);},getXY:function(){return D.getXY(this.dom);},setX:function(x,J){if(!J||!A){D.setX(this.dom,x);}else{this.setXY([x,this.getY()],this.preanim(arguments,1));}return this;
-},setY:function(y,J){if(!J||!A){D.setY(this.dom,y);}else{this.setXY([this.getX(),y],this.preanim(arguments,1));}return this;},setLeft:function(J){this.setStyle("left",this.addUnits(J));return this;},setTop:function(J){this.setStyle("top",this.addUnits(J));
-return this;},setRight:function(J){this.setStyle("right",this.addUnits(J));return this;},setBottom:function(J){this.setStyle("bottom",this.addUnits(J));return this;},setXY:function(J,K){if(!K||!A){D.setXY(this.dom,J);}else{this.anim({points:{to:J}},this.preanim(arguments,1),'motion');
-}return this;},setLocation:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));return this;},moveTo:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));return this;},getRegion:function(){return D.getRegion(this.dom);},getHeight:function(J){var h=this.dom.offsetHeight||0;
-return J!==true?h:h-this.getBorderWidth("tb")-this.getPadding("tb");},getWidth:function(J){var w=this.dom.offsetWidth||0;return J!==true?w:w-this.getBorderWidth("lr")-this.getPadding("lr");},getComputedHeight:function(){var h=Math.max(this.dom.offsetHeight,this.dom.clientHeight);
-if(!h){h=parseInt(this.getStyle('height'),10)||0;if(!this.isBorderBox()){h+=this.getFrameWidth('tb');}}return h;},getComputedWidth:function(){var w=Math.max(this.dom.offsetWidth,this.dom.clientWidth);if(!w){w=parseInt(this.getStyle('width'),10)||0;if(!this.isBorderBox()){w+=this.getFrameWidth('lr');
-}}return w;},getSize:function(J){return {width:this.getWidth(J),height:this.getHeight(J)};},getViewSize:function(){var d=this.dom,J=document,aw=0,ah=0;if(d==J||d==J.body){return {width:D.getViewWidth(),height:D.getViewHeight()};}else{return {width:d.clientWidth,height:d.clientHeight}
-;}},getValue:function(J){return J?parseInt(this.dom.value,10):this.dom.value;},adjustWidth:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("lr")+this.getPadding("lr"));}if(J<0){J=0;}}return J;},adjustHeight:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("tb")+this.getPadding("tb"));
-}if(J<0){J=0;}}return J;},setWidth:function(J,K){J=this.adjustWidth(J);if(!K||!A){this.dom.style.width=this.addUnits(J);}else{this.anim({width:{to:J}},this.preanim(arguments,1));}return this;},setHeight:function(J,K){J=this.adjustHeight(J);if(!K||!A){this.dom.style.height=this.addUnits(J);
-}else{this.anim({height:{to:J}},this.preanim(arguments,1));}return this;},setSize:function(J,K,L){if(typeof J=="object"){K=J.height;J=J.width;}J=this.adjustWidth(J);K=this.adjustHeight(K);if(!L||!A){this.dom.style.width=this.addUnits(J);this.dom.style.height=this.addUnits(K);
-}else{this.anim({width:{to:J},height:{to:K}},this.preanim(arguments,2));}return this;},setBounds:function(x,y,J,K,L){if(!L||!A){this.setSize(J,K);this.setLocation(x,y);}else{J=this.adjustWidth(J);K=this.adjustHeight(K);this.anim({points:{to:[x,y]},width:{to:J}
-,height:{to:K}},this.preanim(arguments,4),'motion');}return this;},setRegion:function(J,K){this.setBounds(J.left,J.top,J.right-J.left,J.bottom-J.top,this.preanim(arguments,1));return this;},addListener:function(J,fn,K,L){if(this.dom){Roo.EventManager.on(this.dom,J,fn,K||this,L);
-}if(J=='dblclick'){this.addListener('touchstart',this.onTapHandler,this);}},tapedTwice:false,onTapHandler:function(J){if(!this.tapedTwice){this.tapedTwice=true;var s=this;setTimeout(function(){s.tapedTwice=false;},300);return;}J.preventDefault();var K=new MouseEvent('dblclick',{view:window,bubbles:true,cancelable:true}
-);this.dom.dispatchEvent(K);},removeListener:function(J,fn){Roo.EventManager.removeListener(this.dom,J,fn);return this;},removeAllListeners:function(){E.purgeElement(this.dom);return this;},relayEvent:function(J,K){this.on(J,function(e){K.fireEvent(J,e);}
-);},setOpacity:function(J,K){if(!K||!A){var s=this.dom.style;if(Roo.isIE){s.zoom=1;s.filter=(s.filter||'').replace(/alpha\([^\)]*\)/gi,"")+(J==1?"":"alpha(opacity="+J*100+")");}else{s.opacity=J;}}else{this.anim({opacity:{to:J}},this.preanim(arguments,1),null,.35,'easeIn');
-}return this;},getLeft:function(J){if(!J){return this.getX();}else{return parseInt(this.getStyle("left"),10)||0;}},getRight:function(J){if(!J){return this.getX()+this.getWidth();}else{return (this.getLeft(true)+this.getWidth())||0;}},getTop:function(J){if(!J){return this.getY();
-}else{return parseInt(this.getStyle("top"),10)||0;}},getBottom:function(J){if(!J){return this.getY()+this.getHeight();}else{return (this.getTop(true)+this.getHeight())||0;}},position:function(J,K,x,y){if(!J){if(this.getStyle('position')=='static'){this.setStyle('position','relative');
-}}else{this.setStyle("position",J);}if(K){this.setStyle("z-index",K);}if(x!==undefined&&y!==undefined){this.setXY([x,y]);}else if(x!==undefined){this.setX(x);}else if(y!==undefined){this.setY(y);}},clearPositioning:function(J){J=J||'';this.setStyle({"left":J,"right":J,"top":J,"bottom":J,"z-index":"","position":"static"}
-);return this;},getPositioning:function(){var l=this.getStyle("left");var t=this.getStyle("top");return {"position":this.getStyle("position"),"left":l,"right":l?"":this.getStyle("right"),"top":t,"bottom":t?"":this.getStyle("bottom"),"z-index":this.getStyle("z-index")}
-;},getBorderWidth:function(J){return this.addStyles(J,El.borders);},getPadding:function(J){return this.addStyles(J,El.paddings);},setPositioning:function(pc){this.applyStyles(pc);if(pc.right=="auto"){this.dom.style.right="";}if(pc.bottom=="auto"){this.dom.style.bottom="";
-}return this;},fixDisplay:function(){if(this.getStyle("display")=="none"){this.setStyle("visibility","hidden");this.setStyle("display",this.originalDisplay);if(this.getStyle("display")=="none"){this.setStyle("display","block");}}},setLeftTop:function(J,K){this.dom.style.left=this.addUnits(J);
-this.dom.style.top=this.addUnits(K);return this;},move:function(J,K,L){var xy=this.getXY();J=J.toLowerCase();switch(J){case "l":case "left":this.moveTo(xy[0]-K,xy[1],this.preanim(arguments,2));break;case "r":case "right":this.moveTo(xy[0]+K,xy[1],this.preanim(arguments,2));
-break;case "t":case "top":case "up":this.moveTo(xy[0],xy[1]-K,this.preanim(arguments,2));break;case "b":case "bottom":case "down":this.moveTo(xy[0],xy[1]+K,this.preanim(arguments,2));break;}return this;},clip:function(){if(!this.isClipped){this.isClipped=true;
-this.originalClip={"o":this.getStyle("overflow"),"x":this.getStyle("overflow-x"),"y":this.getStyle("overflow-y")};this.setStyle("overflow","hidden");this.setStyle("overflow-x","hidden");this.setStyle("overflow-y","hidden");}return this;},unclip:function(){if(this.isClipped){this.isClipped=false;
-var o=this.originalClip;if(o.o){this.setStyle("overflow",o.o);}if(o.x){this.setStyle("overflow-x",o.x);}if(o.y){this.setStyle("overflow-y",o.y);}}return this;},getAnchorXY:function(J,K,s){var w,h,vp=false;if(!s){var d=this.dom;if(d==document.body||d==document){vp=true;
-w=D.getViewWidth();h=D.getViewHeight();}else{w=this.getWidth();h=this.getHeight();}}else{w=s.width;h=s.height;}var x=0,y=0,r=Math.round;switch((J||"tl").toLowerCase()){case "c":x=r(w*.5);y=r(h*.5);break;case "t":x=r(w*.5);y=0;break;case "l":x=0;y=r(h*.5);
-break;case "r":x=w;y=r(h*.5);break;case "b":x=r(w*.5);y=h;break;case "tl":x=0;y=0;break;case "bl":x=0;y=h;break;case "br":x=w;y=h;break;case "tr":x=w;y=0;break;}if(K===true){return [x,y];}if(vp){var sc=this.getScroll();return [x+sc.left,y+sc.top];}var o=this.getXY();
-return [x+o[0],y+o[1]];},getAlignToXY:function(el,p,o){el=Roo.get(el);var d=this.dom;if(!el.dom){throw "Element.alignTo with an element that doesn't exist";}var c=false;var p1="",p2="";o=o||[0,0];if(!p){p="tl-bl";}else if(p=="?"){p="tl-bl?";}else if(p.indexOf("-")==-1){p="tl-"+p;
-}p=p.toLowerCase();var m=p.match(/^([a-z]+)-([a-z]+)(\?)?$/);if(!m){throw "Element.alignTo with an invalid alignment "+p;}p1=m[1];p2=m[2];c=!!m[3];var a1=this.getAnchorXY(p1,true);var a2=el.getAnchorXY(p2,false);var x=a2[0]-a1[0]+o[0];var y=a2[1]-a1[1]+o[1];
-if(c){var w=this.getWidth(),h=this.getHeight(),r=el.getRegion();var dw=D.getViewWidth()-5,dh=D.getViewHeight()-5;var J=p1.charAt(0),K=p1.charAt(p1.length-1);var L=p2.charAt(0),M=p2.charAt(p2.length-1);var N=((J=="t"&&L=="b")||(J=="b"&&L=="t"));var O=((K=="r"&&M=="l")||(K=="l"&&M=="r"));
-var P=document;var Q=(P.documentElement.scrollLeft||P.body.scrollLeft||0)+5;var R=(P.documentElement.scrollTop||P.body.scrollTop||0)+5;if((x+w)>dw+Q){x=O?r.left-w:dw+Q-w;}if(x<Q){x=O?r.right:Q;}if((y+h)>dh+R){y=N?r.top-h:dh+R-h;}if(y<R){y=N?r.bottom:R;}}return [x,y];
-},getConstrainToXY:function(){var os={top:0,left:0,bottom:0,right:0};return function(el,J,K,L){el=Roo.get(el);K=K?Roo.applyIf(K,os):os;var vw,vh,vx=0,vy=0;if(el.dom==document.body||el.dom==document){vw=Roo.lib.Dom.getViewWidth();vh=Roo.lib.Dom.getViewHeight();
-}else{vw=el.dom.clientWidth;vh=el.dom.clientHeight;if(!J){var M=el.getXY();vx=M[0];vy=M[1];}}var s=el.getScroll();vx+=K.left+s.left;vy+=K.top+s.top;vw-=K.right;vh-=K.bottom;var vr=vx+vw;var vb=vy+vh;var xy=L||(!J?this.getXY():[this.getLeft(true),this.getTop(true)]);
-var x=xy[0],y=xy[1];var w=this.dom.offsetWidth,h=this.dom.offsetHeight;var N=false;if((x+w)>vr){x=vr-w;N=true;}if((y+h)>vb){y=vb-h;N=true;}if(x<vx){x=vx;N=true;}if(y<vy){y=vy;N=true;}return N?[x,y]:false;};}(),adjustForConstraints:function(xy,J,K){return this.getConstrainToXY(J||document,false,K,xy)||xy;
-},alignTo:function(J,K,L,M){var xy=this.getAlignToXY(J,K,L);this.setXY(xy,this.preanim(arguments,3));return this;},anchorTo:function(el,J,K,L,M,N){var O=function(){this.alignTo(el,J,K,L);Roo.callback(N,this);};Roo.EventManager.onWindowResize(O,this);var tm=typeof M;
-if(tm!='undefined'){Roo.EventManager.on(window,'scroll',O,this,{buffer:tm=='number'?M:50});}O.call(this);return this;},clearOpacity:function(){if(window.ActiveXObject){if(typeof this.dom.style.filter=='string'&&(/alpha/i).test(this.dom.style.filter)){this.dom.style.filter="";
-}}else{this.dom.style.opacity="";this.dom.style["-moz-opacity"]="";this.dom.style["-khtml-opacity"]="";}return this;},hide:function(J){this.setVisible(false,this.preanim(arguments,0));return this;},show:function(J){this.setVisible(true,this.preanim(arguments,0));
-return this;},addUnits:function(J){return Roo.Element.addUnits(J,this.defaultUnit);},beginMeasure:function(){var el=this.dom;if(el.offsetWidth||el.offsetHeight){return this;}var J=[];var p=this.dom,b=document.body;while((!el.offsetWidth&&!el.offsetHeight)&&p&&p.tagName&&p!=b){var pe=Roo.get(p);
-if(pe.getStyle('display')=='none'){J.push({el:p,visibility:pe.getStyle("visibility")});p.style.visibility="hidden";p.style.display="block";}p=p.parentNode;}this._measureChanged=J;return this;},endMeasure:function(){var J=this._measureChanged;if(J){for(var i=0,K=J.length;
-i<K;i++){var r=J[i];r.el.style.visibility=r.visibility;r.el.style.display="none";}this._measureChanged=null;}return this;},update:function(J,K,L){if(typeof J=="undefined"){J="";}if(K!==true){this.dom.innerHTML=J;if(typeof L=="function"){L();}return this;}
-var id=Roo.id();var M=this.dom;J+='<span id="'+id+'"></span>';E.onAvailable(id,function(){var hd=document.getElementsByTagName("head")[0];var re=/(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;var N=/\ssrc=([\'\"])(.*?)\1/i;var O=/\stype=([\'\"])(.*?)\1/i;
-var P;while(P=re.exec(J)){var Q=P[1];var R=Q?Q.match(N):false;if(R&&R[2]){var s=document.createElement("script");s.src=R[2];var S=Q.match(O);if(S&&S[2]){s.type=S[2];}hd.appendChild(s);}else if(P[2]&&P[2].length>0){if(window.execScript){window.execScript(P[2]);
-}else{window.eval(P[2]);}}}var el=document.getElementById(id);if(el){el.parentNode.removeChild(el);}if(typeof L=="function"){L();}});M.innerHTML=J.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,"");return this;},load:function(){var um=this.getUpdateManager();
-um.update.apply(um,arguments);return this;},getUpdateManager:function(){if(!this.updateManager){this.updateManager=new Roo.UpdateManager(this);}return this.updateManager;},unselectable:function(){this.dom.unselectable="on";this.swallowEvent("selectstart",true);
-this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");this.addClass("x-unselectable");return this;},getCenterXY:function(){return this.getAlignToXY(document,'c-c');},center:function(J){this.alignTo(J||document,'c-c');return this;},isBorderBox:function(){return I[this.dom.tagName.toLowerCase()]||Roo.isBorderBox;
-},getBox:function(J,K){var xy;if(!K){xy=this.getXY();}else{var L=parseInt(this.getStyle("left"),10)||0;var M=parseInt(this.getStyle("top"),10)||0;xy=[L,M];}var el=this.dom,w=el.offsetWidth,h=el.offsetHeight,bx;if(!J){bx={x:xy[0],y:xy[1],0:xy[0],1:xy[1],width:w,height:h}
-;}else{var l=this.getBorderWidth("l")+this.getPadding("l");var r=this.getBorderWidth("r")+this.getPadding("r");var t=this.getBorderWidth("t")+this.getPadding("t");var b=this.getBorderWidth("b")+this.getPadding("b");bx={x:xy[0]+l,y:xy[1]+t,0:xy[0]+l,1:xy[1]+t,width:w-(l+r),height:h-(t+b)}
-;}bx.right=bx.x+bx.width;bx.bottom=bx.y+bx.height;return bx;},getFrameWidth:function(J,K){return K&&Roo.isBorderBox?0:(this.getPadding(J)+this.getBorderWidth(J));},setBox:function(J,K,L){var w=J.width,h=J.height;if((K&&!this.autoBoxAdjust)&&!this.isBorderBox()){w-=(this.getBorderWidth("lr")+this.getPadding("lr"));
-h-=(this.getBorderWidth("tb")+this.getPadding("tb"));}this.setBounds(J.x,J.y,w,h,this.preanim(arguments,2));return this;},repaint:function(){var J=this.dom;this.addClass("x-repaint");setTimeout(function(){Roo.get(J).removeClass("x-repaint");},1);return this;
-},getMargins:function(J){if(!J){return {top:parseInt(this.getStyle("margin-top"),10)||0,left:parseInt(this.getStyle("margin-left"),10)||0,bottom:parseInt(this.getStyle("margin-bottom"),10)||0,right:parseInt(this.getStyle("margin-right"),10)||0};}else{return this.addStyles(J,El.margins);
-}},addStyles:function(J,K){var L=0,v,w;for(var i=0,M=J.length;i<M;i++){v=this.getStyle(K[J.charAt(i)]);if(v){w=parseInt(v,10);if(w){L+=w;}}}return L;},createProxy:function(J,K,L){if(K){K=Roo.getDom(K);}else{K=document.body;}J=typeof J=="object"?J:{tag:"div",cls:J}
-;var M=Roo.DomHelper.append(K,J,true);if(L){M.setBox(this.getBox());}return M;},mask:function(J,K){if(this.getStyle("position")=="static"&&this.dom.tagName!=='BODY'){this.setStyle("position","relative");}if(!this._mask){this._mask=Roo.DomHelper.append(this.dom,{cls:"roo-el-mask"}
+}}else{if(J&&!this.hasClass(J)){if(this.dom instanceof SVGElement){this.dom.className.baseVal=this.dom.className.baseVal+" "+J;}else{this.dom.className=this.dom.className+" "+J;}}}return this;},radioClass:function(J){var K=this.dom.parentNode.childNodes;for(var i=0;
+i<K.length;i++){var s=K[i];if(s.nodeType==1){Roo.get(s).removeClass(J);}}this.addClass(J);return this;},removeClass:function(J){var cn=this.dom instanceof SVGElement?this.dom.className.baseVal:this.dom.className;if(!J||!cn){return this;}if(J instanceof Array){for(var i=0,K=J.length;
+i<K;i++){this.removeClass(J[i]);}}else{if(this.hasClass(J)){var re=this.classReCache[J];if(!re){re=new RegExp('(?:^|\\s+)'+J+'(?:\\s+|$)',"g");this.classReCache[J]=re;}if(this.dom instanceof SVGElement){this.dom.className.baseVal=cn.replace(re," ");}else{this.dom.className=cn.replace(re," ");
+}}}return this;},classReCache:{},toggleClass:function(J){if(this.hasClass(J)){this.removeClass(J);}else{this.addClass(J);}return this;},hasClass:function(J){if(this.dom instanceof SVGElement){return J&&(' '+this.dom.className.baseVal+' ').indexOf(' '+J+' ')!=-1;
+}return J&&(' '+this.dom.className+' ').indexOf(' '+J+' ')!=-1;},replaceClass:function(J,K){this.removeClass(J);this.addClass(K);return this;},getStyles:function(){var a=arguments,J=a.length,r={};for(var i=0;i<J;i++){r[a[i]]=this.getStyle(a[i]);}return r;
+},getStyle:function(){return G&&G.getComputedStyle?function(J){var el=this.dom,v,cs,K;if(J=='float'){J="cssFloat";}if(el.style&&(v=el.style[J])){return v;}if(cs=G.getComputedStyle(el,"")){if(!(K=B[J])){K=B[J]=J.replace(C,F);}return cs[K];}return null;}:function(J){var el=this.dom,v,cs,K;
+if(J=='opacity'){if(typeof el.style.filter=='string'){var m=el.style.filter.match(/alpha\(opacity=(.*)\)/i);if(m){var fv=parseFloat(m[1]);if(!isNaN(fv)){return fv?fv/100:0;}}}return 1;}else if(J=='float'){J="styleFloat";}if(!(K=B[J])){K=B[J]=J.replace(C,F);
+}if(v=el.style[K]){return v;}if(cs=el.currentStyle){return cs[K];}return null;};}(),setStyle:function(J,K){if(typeof J=="string"){if(J=='float'){this.setStyle(Roo.isIE?'styleFloat':'cssFloat',K);return this;}var L;if(!(L=B[J])){L=B[J]=J.replace(C,F);}if(L=='opacity'){this.setOpacity(K);
+}else{this.dom.style[L]=K;}}else{for(var M in J){if(typeof J[M]!="function"){this.setStyle(M,J[M]);}}}return this;},applyStyles:function(J){Roo.DomHelper.applyStyles(this.dom,J);return this;},getX:function(){return D.getX(this.dom);},getY:function(){return D.getY(this.dom);
+},getXY:function(){return D.getXY(this.dom);},setX:function(x,J){if(!J||!A){D.setX(this.dom,x);}else{this.setXY([x,this.getY()],this.preanim(arguments,1));}return this;},setY:function(y,J){if(!J||!A){D.setY(this.dom,y);}else{this.setXY([this.getX(),y],this.preanim(arguments,1));
+}return this;},setLeft:function(J){this.setStyle("left",this.addUnits(J));return this;},setTop:function(J){this.setStyle("top",this.addUnits(J));return this;},setRight:function(J){this.setStyle("right",this.addUnits(J));return this;},setBottom:function(J){this.setStyle("bottom",this.addUnits(J));
+return this;},setXY:function(J,K){if(!K||!A){D.setXY(this.dom,J);}else{this.anim({points:{to:J}},this.preanim(arguments,1),'motion');}return this;},setLocation:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));return this;},moveTo:function(x,y,J){this.setXY([x,y],this.preanim(arguments,2));
+return this;},getRegion:function(){return D.getRegion(this.dom);},getHeight:function(J){var h=this.dom.offsetHeight||0;return J!==true?h:h-this.getBorderWidth("tb")-this.getPadding("tb");},getWidth:function(J){var w=this.dom.offsetWidth||0;return J!==true?w:w-this.getBorderWidth("lr")-this.getPadding("lr");
+},getComputedHeight:function(){var h=Math.max(this.dom.offsetHeight,this.dom.clientHeight);if(!h){h=parseInt(this.getStyle('height'),10)||0;if(!this.isBorderBox()){h+=this.getFrameWidth('tb');}}return h;},getComputedWidth:function(){var w=Math.max(this.dom.offsetWidth,this.dom.clientWidth);
+if(!w){w=parseInt(this.getStyle('width'),10)||0;if(!this.isBorderBox()){w+=this.getFrameWidth('lr');}}return w;},getSize:function(J){return {width:this.getWidth(J),height:this.getHeight(J)};},getViewSize:function(){var d=this.dom,J=document,aw=0,ah=0;if(d==J||d==J.body){return {width:D.getViewWidth(),height:D.getViewHeight()}
+;}else{return {width:d.clientWidth,height:d.clientHeight};}},getValue:function(J){return J?parseInt(this.dom.value,10):this.dom.value;},adjustWidth:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("lr")+this.getPadding("lr"));
+}if(J<0){J=0;}}return J;},adjustHeight:function(J){if(typeof J=="number"){if(this.autoBoxAdjust&&!this.isBorderBox()){J-=(this.getBorderWidth("tb")+this.getPadding("tb"));}if(J<0){J=0;}}return J;},setWidth:function(J,K){J=this.adjustWidth(J);if(!K||!A){this.dom.style.width=this.addUnits(J);
+}else{this.anim({width:{to:J}},this.preanim(arguments,1));}return this;},setHeight:function(J,K){J=this.adjustHeight(J);if(!K||!A){this.dom.style.height=this.addUnits(J);}else{this.anim({height:{to:J}},this.preanim(arguments,1));}return this;},setSize:function(J,K,L){if(typeof J=="object"){K=J.height;
+J=J.width;}J=this.adjustWidth(J);K=this.adjustHeight(K);if(!L||!A){this.dom.style.width=this.addUnits(J);this.dom.style.height=this.addUnits(K);}else{this.anim({width:{to:J},height:{to:K}},this.preanim(arguments,2));}return this;},setBounds:function(x,y,J,K,L){if(!L||!A){this.setSize(J,K);
+this.setLocation(x,y);}else{J=this.adjustWidth(J);K=this.adjustHeight(K);this.anim({points:{to:[x,y]},width:{to:J},height:{to:K}},this.preanim(arguments,4),'motion');}return this;},setRegion:function(J,K){this.setBounds(J.left,J.top,J.right-J.left,J.bottom-J.top,this.preanim(arguments,1));
+return this;},addListener:function(J,fn,K,L){if(this.dom){Roo.EventManager.on(this.dom,J,fn,K||this,L);}if(J=='dblclick'){this.addListener('touchstart',this.onTapHandler,this);}},tapedTwice:false,onTapHandler:function(J){if(!this.tapedTwice){this.tapedTwice=true;
+var s=this;setTimeout(function(){s.tapedTwice=false;},300);return;}J.preventDefault();var K=new MouseEvent('dblclick',{view:window,bubbles:true,cancelable:true});this.dom.dispatchEvent(K);},removeListener:function(J,fn){Roo.EventManager.removeListener(this.dom,J,fn);
+return this;},removeAllListeners:function(){E.purgeElement(this.dom);return this;},relayEvent:function(J,K){this.on(J,function(e){K.fireEvent(J,e);});},setOpacity:function(J,K){if(!K||!A){var s=this.dom.style;if(Roo.isIE){s.zoom=1;s.filter=(s.filter||'').replace(/alpha\([^\)]*\)/gi,"")+(J==1?"":"alpha(opacity="+J*100+")");
+}else{s.opacity=J;}}else{this.anim({opacity:{to:J}},this.preanim(arguments,1),null,.35,'easeIn');}return this;},getLeft:function(J){if(!J){return this.getX();}else{return parseInt(this.getStyle("left"),10)||0;}},getRight:function(J){if(!J){return this.getX()+this.getWidth();
+}else{return (this.getLeft(true)+this.getWidth())||0;}},getTop:function(J){if(!J){return this.getY();}else{return parseInt(this.getStyle("top"),10)||0;}},getBottom:function(J){if(!J){return this.getY()+this.getHeight();}else{return (this.getTop(true)+this.getHeight())||0;
+}},position:function(J,K,x,y){if(!J){if(this.getStyle('position')=='static'){this.setStyle('position','relative');}}else{this.setStyle("position",J);}if(K){this.setStyle("z-index",K);}if(x!==undefined&&y!==undefined){this.setXY([x,y]);}else if(x!==undefined){this.setX(x);
+}else if(y!==undefined){this.setY(y);}},clearPositioning:function(J){J=J||'';this.setStyle({"left":J,"right":J,"top":J,"bottom":J,"z-index":"","position":"static"});return this;},getPositioning:function(){var l=this.getStyle("left");var t=this.getStyle("top");
+return {"position":this.getStyle("position"),"left":l,"right":l?"":this.getStyle("right"),"top":t,"bottom":t?"":this.getStyle("bottom"),"z-index":this.getStyle("z-index")};},getBorderWidth:function(J){return this.addStyles(J,El.borders);},getPadding:function(J){return this.addStyles(J,El.paddings);
+},setPositioning:function(pc){this.applyStyles(pc);if(pc.right=="auto"){this.dom.style.right="";}if(pc.bottom=="auto"){this.dom.style.bottom="";}return this;},fixDisplay:function(){if(this.getStyle("display")=="none"){this.setStyle("visibility","hidden");
+this.setStyle("display",this.originalDisplay);if(this.getStyle("display")=="none"){this.setStyle("display","block");}}},setLeftTop:function(J,K){this.dom.style.left=this.addUnits(J);this.dom.style.top=this.addUnits(K);return this;},move:function(J,K,L){var xy=this.getXY();
+J=J.toLowerCase();switch(J){case "l":case "left":this.moveTo(xy[0]-K,xy[1],this.preanim(arguments,2));break;case "r":case "right":this.moveTo(xy[0]+K,xy[1],this.preanim(arguments,2));break;case "t":case "top":case "up":this.moveTo(xy[0],xy[1]-K,this.preanim(arguments,2));
+break;case "b":case "bottom":case "down":this.moveTo(xy[0],xy[1]+K,this.preanim(arguments,2));break;}return this;},clip:function(){if(!this.isClipped){this.isClipped=true;this.originalClip={"o":this.getStyle("overflow"),"x":this.getStyle("overflow-x"),"y":this.getStyle("overflow-y")}
+;this.setStyle("overflow","hidden");this.setStyle("overflow-x","hidden");this.setStyle("overflow-y","hidden");}return this;},unclip:function(){if(this.isClipped){this.isClipped=false;var o=this.originalClip;if(o.o){this.setStyle("overflow",o.o);}if(o.x){this.setStyle("overflow-x",o.x);
+}if(o.y){this.setStyle("overflow-y",o.y);}}return this;},getAnchorXY:function(J,K,s){var w,h,vp=false;if(!s){var d=this.dom;if(d==document.body||d==document){vp=true;w=D.getViewWidth();h=D.getViewHeight();}else{w=this.getWidth();h=this.getHeight();}}else{w=s.width;
+h=s.height;}var x=0,y=0,r=Math.round;switch((J||"tl").toLowerCase()){case "c":x=r(w*.5);y=r(h*.5);break;case "t":x=r(w*.5);y=0;break;case "l":x=0;y=r(h*.5);break;case "r":x=w;y=r(h*.5);break;case "b":x=r(w*.5);y=h;break;case "tl":x=0;y=0;break;case "bl":x=0;
+y=h;break;case "br":x=w;y=h;break;case "tr":x=w;y=0;break;}if(K===true){return [x,y];}if(vp){var sc=this.getScroll();return [x+sc.left,y+sc.top];}var o=this.getXY();return [x+o[0],y+o[1]];},getAlignToXY:function(el,p,o){el=Roo.get(el);var d=this.dom;if(!el.dom){throw "Element.alignTo with an element that doesn't exist";
+}var c=false;var p1="",p2="";o=o||[0,0];if(!p){p="tl-bl";}else if(p=="?"){p="tl-bl?";}else if(p.indexOf("-")==-1){p="tl-"+p;}p=p.toLowerCase();var m=p.match(/^([a-z]+)-([a-z]+)(\?)?$/);if(!m){throw "Element.alignTo with an invalid alignment "+p;}p1=m[1];p2=m[2];
+c=!!m[3];var a1=this.getAnchorXY(p1,true);var a2=el.getAnchorXY(p2,false);var x=a2[0]-a1[0]+o[0];var y=a2[1]-a1[1]+o[1];if(c){var w=this.getWidth(),h=this.getHeight(),r=el.getRegion();var dw=D.getViewWidth()-5,dh=D.getViewHeight()-5;var J=p1.charAt(0),K=p1.charAt(p1.length-1);
+var L=p2.charAt(0),M=p2.charAt(p2.length-1);var N=((J=="t"&&L=="b")||(J=="b"&&L=="t"));var O=((K=="r"&&M=="l")||(K=="l"&&M=="r"));var P=document;var Q=(P.documentElement.scrollLeft||P.body.scrollLeft||0)+5;var R=(P.documentElement.scrollTop||P.body.scrollTop||0)+5;
+if((x+w)>dw+Q){x=O?r.left-w:dw+Q-w;}if(x<Q){x=O?r.right:Q;}if((y+h)>dh+R){y=N?r.top-h:dh+R-h;}if(y<R){y=N?r.bottom:R;}}return [x,y];},getConstrainToXY:function(){var os={top:0,left:0,bottom:0,right:0};return function(el,J,K,L){el=Roo.get(el);K=K?Roo.applyIf(K,os):os;
+var vw,vh,vx=0,vy=0;if(el.dom==document.body||el.dom==document){vw=Roo.lib.Dom.getViewWidth();vh=Roo.lib.Dom.getViewHeight();}else{vw=el.dom.clientWidth;vh=el.dom.clientHeight;if(!J){var M=el.getXY();vx=M[0];vy=M[1];}}var s=el.getScroll();vx+=K.left+s.left;
+vy+=K.top+s.top;vw-=K.right;vh-=K.bottom;var vr=vx+vw;var vb=vy+vh;var xy=L||(!J?this.getXY():[this.getLeft(true),this.getTop(true)]);var x=xy[0],y=xy[1];var w=this.dom.offsetWidth,h=this.dom.offsetHeight;var N=false;if((x+w)>vr){x=vr-w;N=true;}if((y+h)>vb){y=vb-h;
+N=true;}if(x<vx){x=vx;N=true;}if(y<vy){y=vy;N=true;}return N?[x,y]:false;};}(),adjustForConstraints:function(xy,J,K){return this.getConstrainToXY(J||document,false,K,xy)||xy;},alignTo:function(J,K,L,M){var xy=this.getAlignToXY(J,K,L);this.setXY(xy,this.preanim(arguments,3));
+return this;},anchorTo:function(el,J,K,L,M,N){var O=function(){this.alignTo(el,J,K,L);Roo.callback(N,this);};Roo.EventManager.onWindowResize(O,this);var tm=typeof M;if(tm!='undefined'){Roo.EventManager.on(window,'scroll',O,this,{buffer:tm=='number'?M:50});
+}O.call(this);return this;},clearOpacity:function(){if(window.ActiveXObject){if(typeof this.dom.style.filter=='string'&&(/alpha/i).test(this.dom.style.filter)){this.dom.style.filter="";}}else{this.dom.style.opacity="";this.dom.style["-moz-opacity"]="";this.dom.style["-khtml-opacity"]="";
+}return this;},hide:function(J){this.setVisible(false,this.preanim(arguments,0));return this;},show:function(J){this.setVisible(true,this.preanim(arguments,0));return this;},addUnits:function(J){return Roo.Element.addUnits(J,this.defaultUnit);},beginMeasure:function(){var el=this.dom;
+if(el.offsetWidth||el.offsetHeight){return this;}var J=[];var p=this.dom,b=document.body;while((!el.offsetWidth&&!el.offsetHeight)&&p&&p.tagName&&p!=b){var pe=Roo.get(p);if(pe.getStyle('display')=='none'){J.push({el:p,visibility:pe.getStyle("visibility")}
+);p.style.visibility="hidden";p.style.display="block";}p=p.parentNode;}this._measureChanged=J;return this;},endMeasure:function(){var J=this._measureChanged;if(J){for(var i=0,K=J.length;i<K;i++){var r=J[i];r.el.style.visibility=r.visibility;r.el.style.display="none";
+}this._measureChanged=null;}return this;},update:function(J,K,L){if(typeof J=="undefined"){J="";}if(K!==true){this.dom.innerHTML=J;if(typeof L=="function"){L();}return this;}var id=Roo.id();var M=this.dom;J+='<span id="'+id+'"></span>';E.onAvailable(id,function(){var hd=document.getElementsByTagName("head")[0];
+var re=/(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;var N=/\ssrc=([\'\"])(.*?)\1/i;var O=/\stype=([\'\"])(.*?)\1/i;var P;while(P=re.exec(J)){var Q=P[1];var R=Q?Q.match(N):false;if(R&&R[2]){var s=document.createElement("script");s.src=R[2];var S=Q.match(O);
+if(S&&S[2]){s.type=S[2];}hd.appendChild(s);}else if(P[2]&&P[2].length>0){if(window.execScript){window.execScript(P[2]);}else{window.eval(P[2]);}}}var el=document.getElementById(id);if(el){el.parentNode.removeChild(el);}if(typeof L=="function"){L();}});M.innerHTML=J.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,"");
+return this;},load:function(){var um=this.getUpdateManager();um.update.apply(um,arguments);return this;},getUpdateManager:function(){if(!this.updateManager){this.updateManager=new Roo.UpdateManager(this);}return this.updateManager;},unselectable:function(){this.dom.unselectable="on";
+this.swallowEvent("selectstart",true);this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");this.addClass("x-unselectable");return this;},getCenterXY:function(){return this.getAlignToXY(document,'c-c');},center:function(J){this.alignTo(J||document,'c-c');
+return this;},isBorderBox:function(){return I[this.dom.tagName.toLowerCase()]||Roo.isBorderBox;},getBox:function(J,K){var xy;if(!K){xy=this.getXY();}else{var L=parseInt(this.getStyle("left"),10)||0;var M=parseInt(this.getStyle("top"),10)||0;xy=[L,M];}var el=this.dom,w=el.offsetWidth,h=el.offsetHeight,bx;
+if(!J){bx={x:xy[0],y:xy[1],0:xy[0],1:xy[1],width:w,height:h};}else{var l=this.getBorderWidth("l")+this.getPadding("l");var r=this.getBorderWidth("r")+this.getPadding("r");var t=this.getBorderWidth("t")+this.getPadding("t");var b=this.getBorderWidth("b")+this.getPadding("b");
+bx={x:xy[0]+l,y:xy[1]+t,0:xy[0]+l,1:xy[1]+t,width:w-(l+r),height:h-(t+b)};}bx.right=bx.x+bx.width;bx.bottom=bx.y+bx.height;return bx;},getFrameWidth:function(J,K){return K&&Roo.isBorderBox?0:(this.getPadding(J)+this.getBorderWidth(J));},setBox:function(J,K,L){var w=J.width,h=J.height;
+if((K&&!this.autoBoxAdjust)&&!this.isBorderBox()){w-=(this.getBorderWidth("lr")+this.getPadding("lr"));h-=(this.getBorderWidth("tb")+this.getPadding("tb"));}this.setBounds(J.x,J.y,w,h,this.preanim(arguments,2));return this;},repaint:function(){var J=this.dom;
+this.addClass("x-repaint");setTimeout(function(){Roo.get(J).removeClass("x-repaint");},1);return this;},getMargins:function(J){if(!J){return {top:parseInt(this.getStyle("margin-top"),10)||0,left:parseInt(this.getStyle("margin-left"),10)||0,bottom:parseInt(this.getStyle("margin-bottom"),10)||0,right:parseInt(this.getStyle("margin-right"),10)||0}
+;}else{return this.addStyles(J,El.margins);}},addStyles:function(J,K){var L=0,v,w;for(var i=0,M=J.length;i<M;i++){v=this.getStyle(K[J.charAt(i)]);if(v){w=parseInt(v,10);if(w){L+=w;}}}return L;},createProxy:function(J,K,L){if(K){K=Roo.getDom(K);}else{K=document.body;
+}J=typeof J=="object"?J:{tag:"div",cls:J};var M=Roo.DomHelper.append(K,J,true);if(L){M.setBox(this.getBox());}return M;},mask:function(J,K){if(this.getStyle("position")=="static"&&this.dom.tagName!=='BODY'){this.setStyle("position","relative");}if(!this._mask){this._mask=Roo.DomHelper.append(this.dom,{cls:"roo-el-mask"}
 ,true);}this.addClass("x-masked");this._mask.setDisplayed(true);var z=0;var L=this.dom;while(L&&L.style){if(!isNaN(parseInt(L.style.zIndex))){z=Math.max(z,parseInt(L.style.zIndex));}L=L.parentNode;}if(this.dom==document.body){z=1000000;this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());}if(typeof J=='string'){if(!this._maskMsg){this._maskMsg=Roo.DomHelper.append(this.dom,{cls:"roo-el-mask-msg",cn:[{tag:'i',cls:'fa fa-spinner fa-spin'},{tag:'div'}]},true);}var mm=this._maskMsg;mm.dom.className=K?"roo-el-mask-msg "+K:"roo-el-mask-msg";
 if(mm.dom.lastChild){mm.dom.lastChild.innerHTML=J;}mm.setDisplayed(true);mm.center(this);mm.setStyle('z-index',z+102);}if(Roo.isIE&&!(Roo.isIE7&&Roo.isStrict)&&this.getStyle('height')=='auto'){this._mask.setHeight(this.getHeight());}this._mask.setStyle('z-index',z+100);
diff --git a/roojs-debug.js b/roojs-debug.js
index 94b9ff7166..8f1eeaff2e 100644
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -7675,7 +7675,11 @@ if(opt.anim.isAnimated()){
                 }
             }else{
                 if(className && !this.hasClass(className)){
-                    this.dom.className = this.dom.className + " " + className;
+                    if (this.dom instanceof SVGElement) {
+                        this.dom.className.baseVal =this.dom.className.baseVal  + " " + className;
+                    } else {
+                        this.dom.className = this.dom.className + " " + className;
+                    }
                 }
             }
             return this;
@@ -7704,7 +7708,9 @@ if(opt.anim.isAnimated()){
          * @return {Roo.Element} this
          */
         removeClass : function(className){
-            if(!className || !this.dom.className){
+            
+            var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
+            if(!className || !cn){
                 return this;
             }
             if(className instanceof Array){
@@ -7718,8 +7724,11 @@ if(opt.anim.isAnimated()){
                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
                        this.classReCache[className] = re;
                     }
-                    this.dom.className =
-                        this.dom.className.replace(re, " ");
+                    if (this.dom instanceof SVGElement) {
+                        this.dom.className.baseVal = cn.replace(re, " ");
+                    } else {
+                        this.dom.className = cn.replace(re, " ");
+                    }
                 }
             }
             return this;
@@ -7748,6 +7757,9 @@ if(opt.anim.isAnimated()){
          * @return {Boolean} True if the class exists, else false
          */
         hasClass : function(className){
+            if (this.dom instanceof SVGElement) {
+                return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1; 
+            } 
             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
         },