* A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the     * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">     * Code:<pre><code>el.on('click', this.onClick, this, {    single: true,    delay: 100,    stopEvent : true,    forumId: 4});</code></pre></p>     * <p>     * <b>Attaching multiple handlers in 1 call</b><br>      * The method also allows for a single argument to be passed which is a config object containing properties     * which specify multiple handlers.</p>     * <p>     * Code:<pre><code></p>el.on({    'click' : {        fn: this.onClick,        scope: this,        delay: 100    },    'mouseover' : {        fn: this.onMouseOver,        scope: this    },    'mouseout' : {        fn: this.onMouseOut,        scope: this    }});</code></pre>     * <p>     * Or a shorthand syntax:<br>     * Code:<pre><code></p>el.on({    'click' : this.onClick,    'mouseover' : this.onMouseOver,    'mouseout' : this.onMouseOut,    scope: this});</code></pre>     */    addListener : function(eventName, fn, scope, options){        Ext.EventManager.on(this.dom,  eventName, fn, scope || this, options);    },    /**     * Removes an event handler from this element.  The shorthand version {@link #un} is equivalent.  Example:     * <pre><code>el.removeListener('click', this.handlerFn);// orel.un('click', this.handlerFn);</code></pre>     * @param {String} eventName the type of event to remove     * @param {Function} fn the method the event invokes     * @param {Object} scope (optional) The scope (The <tt>this</tt> reference) of the handler function. Defaults     * to this Element.     * @return {Ext.Element} this     */    removeListener : function(eventName, fn, scope){        Ext.EventManager.removeListener(this.dom,  eventName, fn, scope || this);        return this;    },    /**     * Removes all previous added listeners from this element     * @return {Ext.Element} this     */    removeAllListeners : function(){        Ext.EventManager.removeAll(this.dom);        return this;    },    /**     * Create an event handler on this element such that when the event fires and is handled by this element,     * it will be relayed to another object (i.e., fired again as if it originated from that object instead).     * @param {String} eventName The type of event to relay     * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context     * for firing the relayed event     */    relayEvent : function(eventName, observable){        this.on(eventName, function(e){            observable.fireEvent(eventName, e);        });    },    /**     * Set the opacity of the element     * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */     setOpacity : function(opacity, animate){        if(!animate || !A){            var s = this.dom.style;            if(Ext.isIE){                s.zoom = 1;                s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +                           (opacity == 1 ? "" : " alpha(opacity=" + opacity * 100 + ")");            }else{                s.opacity = opacity;            }        }else{            this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');        }        return this;    },    /**     * Gets the left X coordinate     * @param {Boolean} local True to get the local css position instead of page coordinate     * @return {Number}     */    getLeft : function(local){        if(!local){            return this.getX();        }else{            return parseInt(this.getStyle("left"), 10) || 0;        }    },    /**     * Gets the right X coordinate of the element (element X position + element width)     * @param {Boolean} local True to get the local css position instead of page coordinate     * @return {Number}     */    getRight : function(local){        if(!local){            return this.getX() + this.getWidth();        }else{            return (this.getLeft(true) + this.getWidth()) || 0;        }    },    /**     * Gets the top Y coordinate     * @param {Boolean} local True to get the local css position instead of page coordinate     * @return {Number}     */    getTop : function(local) {        if(!local){            return this.getY();        }else{            return parseInt(this.getStyle("top"), 10) || 0;        }    },    /**     * Gets the bottom Y coordinate of the element (element Y position + element height)     * @param {Boolean} local True to get the local css position instead of page coordinate     * @return {Number}     */    getBottom : function(local){        if(!local){            return this.getY() + this.getHeight();        }else{            return (this.getTop(true) + this.getHeight()) || 0;        }    },    /**    * Initializes positioning on this element. If a desired position is not passed, it will make the    * the element positioned relative IF it is not already positioned.    * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"    * @param {Number} zIndex (optional) The zIndex to apply    * @param {Number} x (optional) Set the page X position    * @param {Number} y (optional) Set the page Y position    */    position : function(pos, zIndex, x, y){        if(!pos){           if(this.getStyle('position') == 'static'){               this.setStyle('position', 'relative');           }        }else{            this.setStyle("position", pos);        }        if(zIndex){            this.setStyle("z-index", zIndex);        }        if(x !== undefined && y !== undefined){            this.setXY([x, y]);        }else if(x !== undefined){            this.setX(x);        }else if(y !== undefined){            this.setY(y);        }    },    /**    * Clear positioning back to the default when the document was loaded    * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.    * @return {Ext.Element} this     */    clearPositioning : function(value){        value = value ||'';        this.setStyle({            "left": value,            "right": value,            "top": value,            "bottom": value,            "z-index": "",            "position" : "static"        });        return this;    },    /**    * Gets an object with all CSS positioning properties. Useful along with setPostioning to get    * snapshot before performing an update and then restoring the element.    * @return {Object}    */    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")        };    },    /**     * Gets the width of the border(s) for the specified side(s)     * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,     * passing lr would get the border (l)eft width + the border (r)ight width.     * @return {Number} The width of the sides passed added together     */    getBorderWidth : function(side){        return this.addStyles(side, El.borders);    },    /**     * Gets the width of the padding(s) for the specified side(s)     * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,     * passing lr would get the padding (l)eft + the padding (r)ight.     * @return {Number} The padding of the sides passed added together     */    getPadding : function(side){        return this.addStyles(side, El.paddings);    },    /**    * Set positioning with an object returned by getPositioning().    * @param {Object} posCfg    * @return {Ext.Element} this     */    setPositioning : function(pc){        this.applyStyles(pc);        if(pc.right == "auto"){            this.dom.style.right = "";        }        if(pc.bottom == "auto"){            this.dom.style.bottom = "";        }        return this;    },    // private    fixDisplay : function(){        if(this.getStyle("display") == "none"){            this.setStyle("visibility", "hidden");            this.setStyle("display", this.originalDisplay); // first try reverting to default            if(this.getStyle("display") == "none"){ // if that fails, default to block                this.setStyle("display", "block");            }        }    },    // private	setOverflow : function(v){    	if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug    		this.dom.style.overflow = 'hidden';        	(function(){this.dom.style.overflow = 'auto';}).defer(1, this);    	}else{    		this.dom.style.overflow = v;    	}	},    /**     * Quick set left and top adding default units     * @param {String} left The left CSS property value     * @param {String} top The top CSS property value     * @return {Ext.Element} this     */     setLeftTop : function(left, top){        this.dom.style.left = this.addUnits(left);        this.dom.style.top = this.addUnits(top);        return this;    },    /**     * Move this element relative to its current position.     * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").     * @param {Number} distance How far to move the element in pixels     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object     * @return {Ext.Element} this     */     move : function(direction, distance, animate){        var xy = this.getXY();        direction = direction.toLowerCase();        switch(direction){            case "l":            case "left":                this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));                break;           case "r":           case "right":                this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));                break;           case "t":           case "top":           case "up":                this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));                break;           case "b":           case "bottom":           case "down":                this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));                break;        }        return this;    },    /**     *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove     * @return {Ext.Element} 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")           };