lpmp 1.0.0

data/public/ext-3.0.0/src/core/Element.insertion-more.js

@@ -0,0 +1,52 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+Ext.apply(Ext.Element.prototype, function() {
+	var GETDOM = Ext.getDom,
+		GET = Ext.get,
+		DH = Ext.DomHelper;
+	
+	return {	
+		/**
+	     * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
+	     * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.
+	     * @param {String} where (optional) 'before' or 'after' defaults to before
+	     * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
+	     * @return {Ext.Element} the inserted Element
+	     */
+	    insertSibling: function(el, where, returnDom){
+	        var me = this,
+	        	rt;
+	        	
+	        if(Ext.isArray(el)){            
+	            Ext.each(el, function(e) {
+		            rt = me.insertSibling(e, where, returnDom);
+	            });
+	            return rt;
+	        }
+	                
+	        where = (where || 'before').toLowerCase();
+	        el = el || {};
+	       	
+            if(el.nodeType || el.dom){
+                rt = me.dom.parentNode.insertBefore(GETDOM(el), where == 'before' ? me.dom : me.dom.nextSibling);
+                if (!returnDom) {
+                    rt = GET(rt);
+                }
+            }else{
+                if (where == 'after' && !me.dom.nextSibling) {
+                    rt = DH.append(me.dom.parentNode, el, !returnDom);
+                } else {                    
+                    rt = DH[where == 'after' ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
+                }
+            }
+	        return rt;
+	    }
+    };
+}());

data/public/ext-3.0.0/src/core/Element.keys.js

@@ -0,0 +1,48 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+    /**
+     * Convenience method for constructing a KeyMap
+     * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
+     *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function
+     * @return {Ext.KeyMap} The KeyMap created
+     */
+    addKeyListener : function(key, fn, scope){
+        var config;
+        if(!Ext.isObject(key) || Ext.isArray(key)){
+            config = {
+                key: key,
+                fn: fn,
+                scope: scope
+            };
+        }else{
+            config = {
+                key : key.key,
+                shift : key.shift,
+                ctrl : key.ctrl,
+                alt : key.alt,
+                fn: fn,
+                scope: scope
+            };
+        }
+        return new Ext.KeyMap(this, config);
+    },
+
+    /**
+     * Creates a KeyMap for this element
+     * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
+     * @return {Ext.KeyMap} The KeyMap created
+     */
+    addKeyMap : function(config){
+        return new Ext.KeyMap(this, config);
+    }
+});

data/public/ext-3.0.0/src/core/Element.legacy.js

@@ -0,0 +1,42 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+    /**
+     * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
+     * the new height may not be available immediately.
+     * @param {Boolean} animate (optional) Animate the transition (defaults to false)
+     * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
+     * @param {Function} onComplete (optional) Function to call when animation completes
+     * @param {String} easing (optional) Easing method to use (defaults to easeOut)
+     * @return {Ext.Element} this
+     */
+    autoHeight : function(animate, duration, onComplete, easing){
+        var oldHeight = this.getHeight();
+        this.clip();
+        this.setHeight(1); // force clipping
+        setTimeout(function(){
+            var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
+            if(!animate){
+                this.setHeight(height);
+                this.unclip();
+                if(typeof onComplete == "function"){
+                    onComplete();
+                }
+            }else{
+                this.setHeight(oldHeight); // restore original height
+                this.setHeight(height, animate, duration, function(){
+                    this.unclip();
+                    if(typeof onComplete == "function") onComplete();
+                }.createDelegate(this), easing);
+            }
+        }.createDelegate(this), 0);
+        return this;
+    }
+});

data/public/ext-3.0.0/src/core/Element.position-more.js

@@ -0,0 +1,165 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+    /**
+     * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
+     * @param {Object} box The box to fill {x, y, width, height}
+     * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
+     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+     * @return {Ext.Element} this
+     */
+    setBox : function(box, adjust, animate){
+        var me = this,
+        	w = box.width, 
+        	h = box.height;
+        if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
+           w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
+           h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
+        }
+        me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
+        return me;
+    },
+    
+    /**
+     * Return a box {x, y, width, height} that can be used to set another elements
+     * size/location to match this element.
+     * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
+     * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
+     * @return {Object} box An object in the format {x, y, width, height}
+     */
+	getBox : function(contentBox, local) {	    
+	    var me = this,
+        	xy,
+        	left,
+        	top,
+        	getBorderWidth = me.getBorderWidth,
+        	getPadding = me.getPadding, 
+        	l,
+        	r,
+        	t,
+        	b;
+        if(!local){
+            xy = me.getXY();
+        }else{
+            left = parseInt(me.getStyle("left"), 10) || 0;
+            top = parseInt(me.getStyle("top"), 10) || 0;
+            xy = [left, top];
+        }
+        var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
+        if(!contentBox){
+            bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
+        }else{
+            l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
+            r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
+            t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
+            b = getBorderWidth.call(me, "b") + getPadding.call(me, "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;
+	},
+	
+    /**
+     * 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 me = this,        	
+        	xy = me.getXY(),
+        	x = xy[0],
+        	y = xy[1],        	
+        	left = [x - distance, y],
+        	right = [x + distance, y],
+        	top = [x, y - distance],
+        	bottom = [x, y + distance],
+	       	hash = {
+	        	l :	left,
+	        	left : left,
+	        	r : right,
+	        	right : right,
+	        	t : top,
+	        	top : top,
+	        	up : top,
+	        	b : bottom, 
+	        	bottom : bottom,
+	        	down : bottom	        		
+	        };
+        
+ 	    direction = direction.toLowerCase();    
+ 	    me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
+    },
+    
+    /**
+     * 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){
+	    var me = this,
+	    	style = me.dom.style;
+        style.left = me.addUnits(left);
+        style.top = me.addUnits(top);
+        return me;
+    },
+    
+    /**
+     * 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 Ext.lib.Dom.getRegion(this.dom);
+    },
+    
+    /**
+     * 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){
+	    var me = this;
+        if (!animate || !me.anim) {
+            me.setSize(width, height);
+            me.setLocation(x, y);
+        } else {
+            me.anim({points: {to: [x, y]}, 
+            		 width: {to: me.adjustWidth(width)}, 
+            		 height: {to: me.adjustHeight(height)}},
+                     me.preanim(arguments, 4), 
+                     'motion');
+        }
+        return me;
+    },
+
+    /**
+     * 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) {
+        return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
+    }
+});

data/public/ext-3.0.0/src/core/Element.scroll-more.js

@@ -0,0 +1,110 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
+    /**
+     * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
+     * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
+     * @param {Number} value The new scroll value
+     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+     * @return {Element} this
+     */
+    scrollTo : function(side, value, animate){
+        var tester = /top/i,
+        	prop = "scroll" + (tester.test(side) ? "Top" : "Left"),
+        	me = this,
+        	dom = me.dom;
+        if (!animate || !me.anim) {
+            dom[prop] = value;
+        } else {
+            me.anim({scroll: {to: tester.test(prop) ? [dom[prop], value] : [value, dom[prop]]}},
+            		 me.preanim(arguments, 2), 'scroll');
+        }
+        return me;
+    },
+    
+    /**
+     * Scrolls this element into view within the passed container.
+     * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
+     * string (id), dom node, or Ext.Element.
+     * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
+     * @return {Ext.Element} this
+     */
+    scrollIntoView : function(container, hscroll){
+        var c = Ext.getDom(container) || Ext.getBody().dom,
+        	el = this.dom,
+        	o = this.getOffsetsTo(c),
+            l = o[0] + c.scrollLeft,
+            t = o[1] + c.scrollTop,
+            b = t + el.offsetHeight,
+            r = l + el.offsetWidth,
+        	ch = c.clientHeight,
+        	ct = parseInt(c.scrollTop, 10),
+        	cl = parseInt(c.scrollLeft, 10),
+        	cb = ct + ch,
+        	cr = cl + c.clientWidth;
+
+        if (el.offsetHeight > ch || t < ct) {
+        	c.scrollTop = t;
+        } else if (b > cb){
+            c.scrollTop = b-ch;
+        }
+        c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
+
+        if(hscroll !== false){
+			if(el.offsetWidth > c.clientWidth || l < cl){
+                c.scrollLeft = l;
+            }else if(r > cr){
+                c.scrollLeft = r - c.clientWidth;
+            }
+            c.scrollLeft = c.scrollLeft;
+        }
+        return this;
+    },
+
+    // private
+    scrollChildIntoView : function(child, hscroll){
+        Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
+    },
+    
+    /**
+     * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
+     * within this element's scrollable range.
+     * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
+     * @param {Number} distance How far to scroll the element in pixels
+     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+     * @return {Boolean} Returns true if a scroll was triggered or false if the element
+     * was scrolled as far as it could go.
+     */
+     scroll : function(direction, distance, animate){
+         if(!this.isScrollable()){
+             return;
+         }
+         var el = this.dom,
+            l = el.scrollLeft, t = el.scrollTop,
+            w = el.scrollWidth, h = el.scrollHeight,
+            cw = el.clientWidth, ch = el.clientHeight,
+            scrolled = false, v,
+            hash = {
+                l: Math.min(l + distance, w-cw),
+                r: v = Math.max(l - distance, 0),
+                t: Math.max(t - distance, 0),
+                b: Math.min(t + distance, h-ch)
+            };
+            hash.d = hash.b;
+            hash.u = hash.t;
+            
+         direction = direction.substr(0, 1);
+         if((v = hash[direction]) > -1){
+            scrolled = true;
+            this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
+         }
+         return scrolled;
+    }
+});

data/public/ext-3.0.0/src/core/Element.style-more.js

@@ -0,0 +1,318 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+
+// special markup used throughout Ext when box wrapping elements
+Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
+
+Ext.Element.addMethods(function(){
+	var INTERNAL = "_internal";
+	return {
+	    /**
+	     * More flexible version of {@link #setStyle} for setting style properties.
+	     * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+	     * a function which returns such a specification.
+	     * @return {Ext.Element} this
+	     */
+	    applyStyles : function(style){
+	        Ext.DomHelper.applyStyles(this.dom, style);
+	        return this;
+	    },
+
+		/**
+	     * Returns an object with properties matching the styles requested.
+	     * For example, el.getStyles('color', 'font-size', 'width') might return
+	     * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
+	     * @param {String} style1 A style name
+	     * @param {String} style2 A style name
+	     * @param {String} etc.
+	     * @return {Object} The style object
+	     */
+	    getStyles : function(){
+		    var ret = {};
+		    Ext.each(arguments, function(v) {
+			   ret[v] = this.getStyle(v);
+		    },
+		    this);
+		    return ret;
+	    },
+
+		getStyleSize : function(){
+	        var me = this,
+	        	w,
+	        	h,
+	        	d = this.dom,
+	        	s = d.style;
+	        if(s.width && s.width != 'auto'){
+	            w = parseInt(s.width, 10);
+	            if(me.isBorderBox()){
+	               w -= me.getFrameWidth('lr');
+	            }
+	        }
+	        if(s.height && s.height != 'auto'){
+	            h = parseInt(s.height, 10);
+	            if(me.isBorderBox()){
+	               h -= me.getFrameWidth('tb');
+	            }
+	        }
+	        return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
+	    },
+
+	    // private  ==> used by ext full
+		setOverflow : function(v){
+			var dom = this.dom;
+	    	if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
+	    		dom.style.overflow = 'hidden';
+	        	(function(){dom.style.overflow = 'auto';}).defer(1);
+	    	}else{
+	    		dom.style.overflow = v;
+	    	}
+		},
+
+	   /**
+		* <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
+		* a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
+		* <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
+		* {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}).  The markup
+		* is of this form:</p>
+		* <pre><code>
+Ext.Element.boxMarkup =
+    &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>
+     &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>
+     &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;
+		* </code></pre>
+		* <p>Example usage:</p>
+		* <pre><code>
+// Basic box wrap
+Ext.get("foo").boxWrap();
+
+// You can also add a custom class and use CSS inheritance rules to customize the box look.
+// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+// for how to create a custom box wrap style.
+Ext.get("foo").boxWrap().addClass("x-box-blue");
+		* </code></pre>
+		* @param {String} class (optional) A base CSS class to apply to the containing wrapper element
+		* (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
+		* this name to make the overall effect work, so if you supply an alternate base class, make sure you
+		* also supply all of the necessary rules.
+		* @return {Ext.Element} this
+		*/
+	    boxWrap : function(cls){
+	        cls = cls || 'x-box';
+	        var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>"));        //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
+	        Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
+	        return el;
+	    },
+
+        /**
+         * Set the size of this Element. If animation is true, both width and 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){
+			var me = this;
+			if(Ext.isObject(width)){ // in case of object from getSize()
+			    height = width.height;
+			    width = width.width;
+			}
+			width = me.adjustWidth(width);
+			height = me.adjustHeight(height);
+			if(!animate || !me.anim){
+			    me.dom.style.width = me.addUnits(width);
+			    me.dom.style.height = me.addUnits(height);
+			}else{
+			    me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
+			}
+			return me;
+	    },
+
+	    /**
+	     * 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 me = this,
+	        	h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
+	        if(!h){
+	            h = parseInt(me.getStyle('height'), 10) || 0;
+	            if(!me.isBorderBox()){
+	                h += me.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 sum width of the padding and borders for the passed "sides". See getBorderWidth()
+	     for more information about the sides.
+	     * @param {String} sides
+	     * @return {Number}
+	     */
+	    getFrameWidth : function(sides, onlyContentBox){
+	        return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
+	    },
+
+	    /**
+	     * Sets up event handlers to add and remove a css class when the mouse is over this element
+	     * @param {String} className
+	     * @return {Ext.Element} this
+	     */
+	    addClassOnOver : function(className){
+	        this.hover(
+	            function(){
+	                Ext.fly(this, INTERNAL).addClass(className);
+	            },
+	            function(){
+	                Ext.fly(this, INTERNAL).removeClass(className);
+	            }
+	        );
+	        return this;
+	    },
+
+	    /**
+	     * Sets up event handlers to add and remove a css class when this element has the focus
+	     * @param {String} className
+	     * @return {Ext.Element} this
+	     */
+	    addClassOnFocus : function(className){
+		    this.on("focus", function(){
+		        Ext.fly(this, INTERNAL).addClass(className);
+		    }, this.dom);
+		    this.on("blur", function(){
+		        Ext.fly(this, INTERNAL).removeClass(className);
+		    }, this.dom);
+		    return this;
+	    },
+
+	    /**
+	     * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
+	     * @param {String} className
+	     * @return {Ext.Element} this
+	     */
+	    addClassOnClick : function(className){
+	        var dom = this.dom;
+	        this.on("mousedown", function(){
+	            Ext.fly(dom, INTERNAL).addClass(className);
+	            var d = Ext.getDoc(),
+	            	fn = function(){
+		                Ext.fly(dom, INTERNAL).removeClass(className);
+		                d.removeListener("mouseup", fn);
+		            };
+	            d.on("mouseup", fn);
+	        });
+	        return this;
+	    },
+
+	    /**
+	     * Returns the width and height of the viewport.
+        * <pre><code>
+        var vpSize = Ext.getBody().getViewSize();
+
+        // all Windows created afterwards will have a default value of 90% height and 95% width
+        Ext.Window.override({
+            width: vpSize.width * 0.9,
+            height: vpSize.height * 0.95
+        });
+        // To handle window resizing you would have to hook onto onWindowResize.
+        </code></pre>
+	     * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
+	     */
+	    getViewSize : function(){
+	        var doc = document,
+	        	d = this.dom,
+	        	extdom = Ext.lib.Dom,
+	        	isDoc = (d == doc || d == doc.body);
+	        return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),
+	        		 height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };
+	    },
+
+	    /**
+	     * 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)};
+	    },
+
+	    /**
+	     * Forces the browser to repaint this element
+	     * @return {Ext.Element} this
+	     */
+	    repaint : function(){
+	        var dom = this.dom;
+	        this.addClass("x-repaint");
+	        setTimeout(function(){
+	            Ext.fly(dom).removeClass("x-repaint");
+	        }, 1);
+	        return this;
+	    },
+
+	    /**
+	     * Disables text selection for this element (normalized across browsers)
+	     * @return {Ext.Element} this
+	     */
+	    unselectable : function(){
+	        this.dom.unselectable = "on";
+	        return this.swallowEvent("selectstart", true).
+	        		    applyStyles("-moz-user-select:none;-khtml-user-select:none;").
+	        		    addClass("x-unselectable");
+	    },
+
+	    /**
+	     * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
+	     * then it returns the calculated width of the sides (see getPadding)
+	     * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
+	     * @return {Object/Number}
+	     */
+	    getMargins : function(side){
+		    var me = this,
+		    	key,
+		    	hash = {t:"top", l:"left", r:"right", b: "bottom"},
+		    	o = {};
+
+		    if (!side) {
+		        for (key in me.margins){
+		        	o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;
+                }
+		        return o;
+	        } else {
+	            return me.addStyles.call(me, side, me.margins);
+	        }
+	    }
+    };
+}());