*/    setRight : function(right){        this.setStyle("right", this.addUnits(right));        return this;    },    /**     * Sets the element's CSS bottom style.     * @param {String} bottom The bottom CSS property value     * @return {Ext.Element} this     */    setBottom : function(bottom){        this.setStyle("bottom", this.addUnits(bottom));        return this;    },    /**     * Sets the position of the element in page coordinates, regardless of how the element is positioned.     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).     * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object     * @return {Ext.Element} this     */    setXY : function(pos, animate){        if(!animate || !A){            D.setXY(this.dom, pos);        }else{            this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');        }        return this;    },    /**     * Sets the position of the element in page coordinates, regardless of how the element is positioned.     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).     * @param {Number} x X value for new position (coordinates are page-based)     * @param {Number} y Y value for new position (coordinates are page-based)     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object     * @return {Ext.Element} this     */    setLocation : function(x, y, animate){        this.setXY([x, y], this.preanim(arguments, 2));        return this;    },    /**     * Sets the position of the element in page coordinates, regardless of how the element is positioned.     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).     * @param {Number} x X value for new position (coordinates are page-based)     * @param {Number} y Y value for new position (coordinates are page-based)     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object     * @return {Ext.Element} this     */    moveTo : function(x, y, animate){        this.setXY([x, y], this.preanim(arguments, 2));        return this;    },    /**     * Returns the region of the given element.     * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).     * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.     */    getRegion : function(){        return D.getRegion(this.dom);    },    /**     * Returns the offset height of the element     * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding     * @return {Number} The element's height     */    getHeight : function(contentHeight){        var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight) || 0;        h = contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");        return h < 0 ? 0 : h;    },    /**     * Returns the offset width of the element     * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding     * @return {Number} The element's width     */    getWidth : function(contentWidth){        var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth) || 0;        w = contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");        return w < 0 ? 0 : w;    },    /**     * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders     * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements     * if a height has not been set using CSS.     * @return {Number}     */    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;    },    /**     * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders     * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements     * if a width has not been set using CSS.     * @return {Number}     */    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;    },    /**     * Returns the size of the element.     * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding     * @return {Object} An object containing the element's size {width: (element width), height: (element height)}     */    getSize : function(contentSize){        return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};    },    getStyleSize : function(){        var w, h, d = this.dom, s = d.style;        if(s.width && s.width != 'auto'){            w = parseInt(s.width, 10);            if(Ext.isBorderBox){               w -= this.getFrameWidth('lr');            }        }        if(s.height && s.height != 'auto'){            h = parseInt(s.height, 10);            if(Ext.isBorderBox){               h -= this.getFrameWidth('tb');            }        }        return {width: w || this.getWidth(true), height: h || this.getHeight(true)};    },    /**     * Returns the width and height of the viewport.     * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}     */    getViewSize : function(){        var d = this.dom, doc = document, aw = 0, ah = 0;        if(d == doc || d == doc.body){            return {width : D.getViewWidth(), height: D.getViewHeight()};        }else{            return {                width : d.clientWidth,                height: d.clientHeight            };        }    },    /**     * Returns the value of the "value" attribute     * @param {Boolean} asNumber true to parse the value as a number     * @return {String/Number}     */    getValue : function(asNumber){        return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;    },    // private    adjustWidth : function(width){        if(typeof width == "number"){            if(this.autoBoxAdjust && !this.isBorderBox()){               width -= (this.getBorderWidth("lr") + this.getPadding("lr"));            }            if(width < 0){                width = 0;            }        }        return width;    },    // private    adjustHeight : function(height){        if(typeof height == "number"){           if(this.autoBoxAdjust && !this.isBorderBox()){               height -= (this.getBorderWidth("tb") + this.getPadding("tb"));           }           if(height < 0){               height = 0;           }        }        return height;    },    /**     * Set the width of this Element.     * @param {Mixed} width The new width. This may be one of<div class="mdetail-params"><ul>     * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>     * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.     * </ul></div>     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */    setWidth : function(width, animate){        width = this.adjustWidth(width);        if(!animate || !A){            this.dom.style.width = this.addUnits(width);        }else{            this.anim({width: {to: width}}, this.preanim(arguments, 1));        }        return this;    },    /**     * Set the height of this Element.     * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>     * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>     * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>     * </ul></div>     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */     setHeight : function(height, animate){        height = this.adjustHeight(height);        if(!animate || !A){            this.dom.style.height = this.addUnits(height);        }else{            this.anim({height: {to: height}}, this.preanim(arguments, 1));        }        return this;    },    /**     * Set the size of this Element. If animation is true, both width an height will be animated concurrently.     * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>     * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>     * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.     * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>     * </ul></div>     * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>     * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>     * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>     * </ul></div>     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */     setSize : function(width, height, animate){        if(typeof width == "object"){ // in case of object from getSize()            height = width.height; width = width.width;        }        width = this.adjustWidth(width); height = this.adjustHeight(height);        if(!animate || !A){            this.dom.style.width = this.addUnits(width);            this.dom.style.height = this.addUnits(height);        }else{            this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));        }        return this;    },    /**     * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.     * @param {Number} x X value for new position (coordinates are page-based)     * @param {Number} y Y value for new position (coordinates are page-based)     * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>     * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>     * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.     * </ul></div>     * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>     * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>     * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>     * </ul></div>     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */    setBounds : function(x, y, width, height, animate){        if(!animate || !A){            this.setSize(width, height);            this.setLocation(x, y);        }else{            width = this.adjustWidth(width); height = this.adjustHeight(height);            this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},                          this.preanim(arguments, 4), 'motion');        }        return this;    },    /**     * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.     * @param {Ext.lib.Region} region The region to fill     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */    setRegion : function(region, animate){        this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));        return this;    },    /**     * Appends an event handler to this element.  The shorthand version {@link #on} is equivalent.     * @param {String} eventName The type of event to handle     * @param {Function} fn The handler function the event invokes. This function is passed     * the following parameters:<ul>     * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>     * <li><b>el</b> : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.     * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>     * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>     * </ul>     * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.     * <b>If omitted, defaults to this Element.</b>.     * @param {Object} options (optional) An object containing handler configuration properties.     * This may contain any of the following properties:<ul>     * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.     * <b>If omitted, defaults to this Element.</b></div></li>     * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>     * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>     * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>     * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>     * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>     * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>     * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>     * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed     * by the specified number of milliseconds. If the event fires again within that time, the original     * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>     * </ul><br>     * <p>     * <b>Combining Options</b><br>     * In the following examples, the shorthand form {@link #on} is used rather than the more verbose     * addListener.  The two are equivalent.  Using the options argument, it is possible to combine different     * types of listeners:<br>     * <br>