4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
19 </span> * @class Ext.core.Element
22 Ext.core.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>';
23 // local style camelizing for speed
24 var supports = Ext.supports,
25 view = document.defaultView,
26 opacityRe = /alpha\(opacity=(.*)\)/i,
27 trimRe = /^\s+|\s+$/g,
30 adjustDirect2DTableRe = /table-row|table-.*-group/,
31 INTERNAL = '_internal',
42 ISCLIPPED = 'isClipped',
43 OVERFLOW = 'overflow',
44 OVERFLOWX = 'overflow-x',
45 OVERFLOWY = 'overflow-y',
46 ORIGINALCLIP = 'originalClip',
47 // special markup used throughout Ext when box wrapping elements
48 borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
49 paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
50 margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
51 data = Ext.core.Element.data;
53 Ext.override(Ext.core.Element, {
55 <span id='Ext-core-Element-method-adjustWidth'> /**
56 </span> * TODO: Look at this
58 // private ==> used by Fx
59 adjustWidth : function(width) {
61 isNum = (typeof width == 'number');
63 if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
64 width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
66 return (isNum && width < 0) ? 0 : width;
69 // private ==> used by Fx
70 adjustHeight : function(height) {
72 isNum = (typeof height == "number");
74 if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
75 height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
77 return (isNum && height < 0) ? 0 : height;
81 <span id='Ext-core-Element-method-addCls'> /**
82 </span> * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
83 * @param {String/Array} className The CSS classes to add separated by space, or an array of classes
84 * @return {Ext.core.Element} this
86 addCls : function(className){
89 space = ((me.dom.className.replace(trimRe, '') == '') ? "" : " "),
91 if (!Ext.isDefined(className)) {
94 // Separate case is for speed
95 if (!Ext.isArray(className)) {
96 if (typeof className === 'string') {
97 className = className.replace(trimRe, '').split(spacesRe);
98 if (className.length === 1) {
99 className = className[0];
100 if (!me.hasCls(className)) {
101 me.dom.className += space + className;
104 this.addCls(className);
108 for (i = 0, len = className.length; i < len; i++) {
110 if (typeof v == 'string' && (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) {
115 me.dom.className += space + cls.join(" ");
121 <span id='Ext-core-Element-method-removeCls'> /**
122 </span> * Removes one or more CSS classes from the element.
123 * @param {String/Array} className The CSS classes to remove separated by space, or an array of classes
124 * @return {Ext.core.Element} this
126 removeCls : function(className){
128 i, idx, len, cls, elClasses;
129 if (!Ext.isDefined(className)) {
132 if (!Ext.isArray(className)){
133 className = className.replace(trimRe, '').split(spacesRe);
135 if (me.dom && me.dom.className) {
136 elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
137 for (i = 0, len = className.length; i < len; i++) {
139 if (typeof cls == 'string') {
140 cls = cls.replace(trimRe, '');
141 idx = Ext.Array.indexOf(elClasses, cls);
143 elClasses.splice(idx, 1);
147 me.dom.className = elClasses.join(" ");
152 <span id='Ext-core-Element-method-radioCls'> /**
153 </span> * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
154 * @param {String/Array} className The CSS class to add, or an array of classes
155 * @return {Ext.core.Element} this
157 radioCls : function(className){
158 var cn = this.dom.parentNode.childNodes,
160 className = Ext.isArray(className) ? className : [className];
161 for (i = 0, len = cn.length; i < len; i++) {
163 if (v && v.nodeType == 1) {
164 Ext.fly(v, '_internal').removeCls(className);
167 return this.addCls(className);
170 <span id='Ext-core-Element-method-toggleCls'> /**
171 </span> * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
172 * @param {String} className The CSS class to toggle
173 * @return {Ext.core.Element} this
176 toggleCls : Ext.supports.ClassList ?
177 function(className) {
178 this.dom.classList.toggle(Ext.String.trim(className));
181 function(className) {
182 return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
185 <span id='Ext-core-Element-method-hasCls'> /**
186 </span> * Checks if the specified CSS class exists on this element's DOM node.
187 * @param {String} className The CSS class to check for
188 * @return {Boolean} True if the class exists, else false
191 hasCls : Ext.supports.ClassList ?
192 function(className) {
196 className = className.split(spacesRe);
197 var ln = className.length,
199 for (; i < ln; i++) {
200 if (className[i] && this.dom.classList.contains(className[i])) {
207 return className && (' ' + this.dom.className + ' ').indexOf(' ' + className + ' ') != -1;
210 <span id='Ext-core-Element-method-replaceCls'> /**
211 </span> * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
212 * @param {String} oldClassName The CSS class to replace
213 * @param {String} newClassName The replacement CSS class
214 * @return {Ext.core.Element} this
216 replaceCls : function(oldClassName, newClassName){
217 return this.removeCls(oldClassName).addCls(newClassName);
220 isStyle : function(style, val) {
221 return this.getStyle(style) == val;
224 <span id='Ext-core-Element-method-getStyle'> /**
225 </span> * Normalizes currentStyle and computedStyle.
226 * @param {String} property The style property whose value is returned.
227 * @return {String} The current value of the style property for this element.
230 getStyle : function(){
231 return view && view.getComputedStyle ?
234 v, cs, out, display, cleaner;
239 prop = Ext.core.Element.normalize(prop);
240 out = (v = el.style[prop]) ? v :
241 (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
243 // Ignore cases when the margin is correctly reported as 0, the bug only shows
245 if(prop == 'marginRight' && out != '0px' && !supports.RightMargin){
246 cleaner = Ext.core.Element.getRightMarginFixCleaner(el);
247 display = this.getStyle('display');
248 el.style.display = 'inline-block';
249 out = view.getComputedStyle(el, '').marginRight;
250 el.style.display = display;
254 if(prop == 'backgroundColor' && out == 'rgba(0, 0, 0, 0)' && !supports.TransparentColor){
263 if (el == document) {
267 if (prop == 'opacity') {
268 if (el.style.filter.match) {
269 m = el.style.filter.match(opacityRe);
271 var fv = parseFloat(m[1]);
273 return fv ? fv / 100 : 0;
279 prop = Ext.core.Element.normalize(prop);
280 return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
284 <span id='Ext-core-Element-method-getColor'> /**
285 </span> * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
286 * are convert to standard 6 digit hex color.
287 * @param {String} attr The css attribute
288 * @param {String} defaultValue The default value to use when a valid color isn't found
289 * @param {String} prefix (optional) defaults to #. Use an empty string when working with
292 getColor : function(attr, defaultValue, prefix){
293 var v = this.getStyle(attr),
294 color = prefix || prefix === '' ? prefix : '#',
297 if(!v || (/transparent|inherit/.test(v))) {
301 Ext.each(v.slice(4, v.length -1).split(','), function(s){
303 color += (h < 16 ? '0' : '') + h.toString(16);
306 v = v.replace('#', '');
307 color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
309 return(color.length > 5 ? color.toLowerCase() : defaultValue);
312 <span id='Ext-core-Element-method-setStyle'> /**
313 </span> * Wrapper for setting style properties, also takes single object parameter of multiple styles.
314 * @param {String/Object} property The style property to be set, or an object of multiple styles.
315 * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
316 * @return {Ext.core.Element} this
318 setStyle : function(prop, value){
326 if (!Ext.isObject(prop)) {
331 for (style in prop) {
332 if (prop.hasOwnProperty(style)) {
333 value = Ext.value(prop[style], '');
334 if (style == 'opacity') {
335 me.setOpacity(value);
338 me.dom.style[Ext.core.Element.normalize(style)] = value;
345 <span id='Ext-core-Element-method-setOpacity'> /**
346 </span> * Set the opacity of the element
347 * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
348 * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
349 * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
350 * @return {Ext.core.Element} this
352 setOpacity: function(opacity, animate) {
362 style = me.dom.style;
364 if (!animate || !me.anim) {
365 if (!Ext.supports.Opacity) {
366 opacity = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')': '';
367 val = style.filter.replace(opacityRe, '').replace(trimRe, '');
370 style.filter = val + (val.length > 0 ? ' ': '') + opacity;
373 style.opacity = opacity;
377 if (!Ext.isObject(animate)) {
383 me.animate(Ext.applyIf({
394 <span id='Ext-core-Element-method-clearOpacity'> /**
395 </span> * Clears any opacity settings from this element. Required in some cases for IE.
396 * @return {Ext.core.Element} this
398 clearOpacity : function(){
399 var style = this.dom.style;
400 if(!Ext.supports.Opacity){
401 if(!Ext.isEmpty(style.filter)){
402 style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
405 style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
410 <span id='Ext-core-Element-method-adjustDirect2DDimension'> /**
412 * Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
413 * @return {Number} 0 or 1
415 adjustDirect2DDimension: function(dimension) {
418 display = me.getStyle('display'),
419 inlineDisplay = dom.style['display'],
420 inlinePosition = dom.style['position'],
421 originIndex = dimension === 'width' ? 0 : 1,
424 if (display === 'inline') {
425 dom.style['display'] = 'inline-block';
428 dom.style['position'] = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
430 // floating will contain digits that appears after the decimal point
431 // if height or width are set to auto we fallback to msTransformOrigin calculation
432 floating = (parseFloat(me.getStyle(dimension)) || parseFloat(dom.currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
434 dom.style['position'] = inlinePosition;
436 if (display === 'inline') {
437 dom.style['display'] = inlineDisplay;
443 <span id='Ext-core-Element-method-getHeight'> /**
444 </span> * Returns the offset height of the element
445 * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
446 * @return {Number} The element's height
448 getHeight: function(contentHeight, preciseHeight) {
451 hidden = Ext.isIE && me.isStyle('display', 'none'),
452 height, overflow, style, floating;
454 // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
455 // We will put the overflow back to it's original value when we are done measuring.
456 if (Ext.isIEQuirks) {
458 overflow = style.overflow;
459 me.setStyle({ overflow: 'hidden'});
462 height = dom.offsetHeight;
464 height = MATH.max(height, hidden ? 0 : dom.clientHeight) || 0;
466 // IE9 Direct2D dimension rounding bug
467 if (!hidden && Ext.supports.Direct2DBug) {
468 floating = me.adjustDirect2DDimension('height');
472 else if (floating > 0 && floating < 0.5) {
478 height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
481 if (Ext.isIEQuirks) {
482 me.setStyle({ overflow: overflow});
491 <span id='Ext-core-Element-method-getWidth'> /**
492 </span> * Returns the offset width of the element
493 * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
494 * @return {Number} The element's width
496 getWidth: function(contentWidth, preciseWidth) {
499 hidden = Ext.isIE && me.isStyle('display', 'none'),
500 rect, width, overflow, style, floating, parentPosition;
502 // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
503 // We will put the overflow back to it's original value when we are done measuring.
504 if (Ext.isIEQuirks) {
506 overflow = style.overflow;
507 me.setStyle({overflow: 'hidden'});
510 // Fix Opera 10.5x width calculation issues
511 if (Ext.isOpera10_5) {
512 if (dom.parentNode.currentStyle.position === 'relative') {
513 parentPosition = dom.parentNode.style.position;
514 dom.parentNode.style.position = 'static';
515 width = dom.offsetWidth;
516 dom.parentNode.style.position = parentPosition;
518 width = Math.max(width || 0, dom.offsetWidth);
520 // Gecko will in some cases report an offsetWidth that is actually less than the width of the
521 // text contents, because it measures fonts with sub-pixel precision but rounds the calculated
522 // value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
523 // subpixel measurements so we can force them to always be rounded up. See
524 // https://bugzilla.mozilla.org/show_bug.cgi?id=458617
525 } else if (Ext.supports.BoundingClientRect) {
526 rect = dom.getBoundingClientRect();
527 width = rect.right - rect.left;
528 width = preciseWidth ? width : Math.ceil(width);
530 width = dom.offsetWidth;
533 width = MATH.max(width, hidden ? 0 : dom.clientWidth) || 0;
535 // IE9 Direct2D dimension rounding bug
536 if (!hidden && Ext.supports.Direct2DBug) {
537 floating = me.adjustDirect2DDimension('width');
541 else if (floating > 0 && floating < 0.5) {
547 width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
550 if (Ext.isIEQuirks) {
551 me.setStyle({ overflow: overflow});
560 <span id='Ext-core-Element-method-setWidth'> /**
561 </span> * Set the width of this Element.
562 * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
563 * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
564 * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
565 * </ul></div>
566 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
567 * @return {Ext.core.Element} this
569 setWidth : function(width, animate){
571 width = me.adjustWidth(width);
572 if (!animate || !me.anim) {
573 me.dom.style.width = me.addUnits(width);
576 if (!Ext.isObject(animate)) {
579 me.animate(Ext.applyIf({
588 <span id='Ext-core-Element-method-setHeight'> /**
589 </span> * Set the height of this Element.
590 * <pre><code>
591 // change the height to 200px and animate with default configuration
592 Ext.fly('elementId').setHeight(200, true);
594 // change the height to 150px and animate with a custom configuration
595 Ext.fly('elId').setHeight(150, {
596 duration : .5, // animation will have a duration of .5 seconds
597 // will change the content to "finished"
598 callback: function(){ this.{@link #update}("finished"); }
600 * </code></pre>
601 * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
602 * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
603 * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
604 * </ul></div>
605 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
606 * @return {Ext.core.Element} this
608 setHeight : function(height, animate){
610 height = me.adjustHeight(height);
611 if (!animate || !me.anim) {
612 me.dom.style.height = me.addUnits(height);
615 if (!Ext.isObject(animate)) {
618 me.animate(Ext.applyIf({
627 <span id='Ext-core-Element-method-getBorderWidth'> /**
628 </span> * Gets the width of the border(s) for the specified side(s)
629 * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
630 * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
631 * @return {Number} The width of the sides passed added together
633 getBorderWidth : function(side){
634 return this.addStyles(side, borders);
637 <span id='Ext-core-Element-method-getPadding'> /**
638 </span> * Gets the width of the padding(s) for the specified side(s)
639 * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
640 * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
641 * @return {Number} The padding of the sides passed added together
643 getPadding : function(side){
644 return this.addStyles(side, paddings);
647 <span id='Ext-core-Element-method-clip'> /**
648 </span> * Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
649 * @return {Ext.core.Element} this
655 if(!data(dom, ISCLIPPED)){
656 data(dom, ISCLIPPED, true);
657 data(dom, ORIGINALCLIP, {
658 o: me.getStyle(OVERFLOW),
659 x: me.getStyle(OVERFLOWX),
660 y: me.getStyle(OVERFLOWY)
662 me.setStyle(OVERFLOW, HIDDEN);
663 me.setStyle(OVERFLOWX, HIDDEN);
664 me.setStyle(OVERFLOWY, HIDDEN);
669 <span id='Ext-core-Element-method-unclip'> /**
670 </span> * Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
671 * @return {Ext.core.Element} this
678 if(data(dom, ISCLIPPED)){
679 data(dom, ISCLIPPED, false);
680 clip = data(dom, ORIGINALCLIP);
682 me.setStyle(OVERFLOW, o.o);
685 me.setStyle(OVERFLOWX, o.x);
688 me.setStyle(OVERFLOWY, o.y);
695 addStyles : function(sides, styles){
697 sidesArr = sides.match(wordsRe),
699 len = sidesArr.length,
701 for (; i < len; i++) {
703 size = side && parseInt(this.getStyle(styles[side]), 10);
705 totalSize += MATH.abs(size);
713 <span id='Ext-core-Element-method-applyStyles'> /**
714 </span> * More flexible version of {@link #setStyle} for setting style properties.
715 * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
716 * a function which returns such a specification.
717 * @return {Ext.core.Element} this
719 applyStyles : function(style){
720 Ext.core.DomHelper.applyStyles(this.dom, style);
724 <span id='Ext-core-Element-method-getStyles'> /**
725 </span> * Returns an object with properties matching the styles requested.
726 * For example, el.getStyles('color', 'font-size', 'width') might return
727 * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
728 * @param {String} style1 A style name
729 * @param {String} style2 A style name
730 * @param {String} etc.
731 * @return {Object} The style object
733 getStyles : function(){
735 len = arguments.length,
738 for(; i < len; ++i) {
739 style = arguments[i];
740 styles[style] = this.getStyle(style);
745 <span id='Ext-core-Element-method-boxWrap'> /**
746 </span> * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
747 * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
748 * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
749 * {@link Ext.panel.Panel} when <tt>{@link Ext.panel.Panel#frame frame=true}</tt>, {@link Ext.window.Window}). The markup
750 * is of this form:</p>
751 * <pre><code>
752 Ext.core.Element.boxMarkup =
753 &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>
754 &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>
755 &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;
756 * </code></pre>
757 * <p>Example usage:</p>
758 * <pre><code>
760 Ext.get("foo").boxWrap();
762 // You can also add a custom class and use CSS inheritance rules to customize the box look.
763 // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
764 // for how to create a custom box wrap style.
765 Ext.get("foo").boxWrap().addCls("x-box-blue");
766 * </code></pre>
767 * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
768 * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
769 * this name to make the overall effect work, so if you supply an alternate base class, make sure you
770 * also supply all of the necessary rules.
771 * @return {Ext.core.Element} The outermost wrapping element of the created box structure.
773 boxWrap : function(cls){
774 cls = cls || Ext.baseCSSPrefix + 'box';
775 var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(Ext.core.Element.boxMarkup, cls) + "</div>"));
776 Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
780 <span id='Ext-core-Element-method-setSize'> /**
781 </span> * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
782 * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
783 * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
784 * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
785 * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
786 * </ul></div>
787 * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
788 * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
789 * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
790 * </ul></div>
791 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
792 * @return {Ext.core.Element} this
794 setSize : function(width, height, animate){
796 if (Ext.isObject(width)){ // in case of object from getSize()
797 height = width.height;
800 width = me.adjustWidth(width);
801 height = me.adjustHeight(height);
802 if(!animate || !me.anim){
803 me.dom.style.width = me.addUnits(width);
804 me.dom.style.height = me.addUnits(height);
807 if (!Ext.isObject(animate)) {
810 me.animate(Ext.applyIf({
820 <span id='Ext-core-Element-method-getComputedHeight'> /**
821 </span> * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
822 * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
823 * if a height has not been set using CSS.
826 getComputedHeight : function(){
828 h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
830 h = parseFloat(me.getStyle('height')) || 0;
831 if(!me.isBorderBox()){
832 h += me.getFrameWidth('tb');
838 <span id='Ext-core-Element-method-getComputedWidth'> /**
839 </span> * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
840 * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
841 * if a width has not been set using CSS.
844 getComputedWidth : function(){
846 w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
849 w = parseFloat(me.getStyle('width')) || 0;
850 if(!me.isBorderBox()){
851 w += me.getFrameWidth('lr');
857 <span id='Ext-core-Element-method-getFrameWidth'> /**
858 </span> * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
859 for more information about the sides.
860 * @param {String} sides
863 getFrameWidth : function(sides, onlyContentBox){
864 return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
867 <span id='Ext-core-Element-method-addClsOnOver'> /**
868 </span> * Sets up event handlers to add and remove a css class when the mouse is over this element
869 * @param {String} className
870 * @return {Ext.core.Element} this
872 addClsOnOver : function(className){
876 Ext.fly(dom, INTERNAL).addCls(className);
879 Ext.fly(dom, INTERNAL).removeCls(className);
885 <span id='Ext-core-Element-method-addClsOnFocus'> /**
886 </span> * Sets up event handlers to add and remove a css class when this element has the focus
887 * @param {String} className
888 * @return {Ext.core.Element} this
890 addClsOnFocus : function(className){
893 me.on("focus", function(){
894 Ext.fly(dom, INTERNAL).addCls(className);
896 me.on("blur", function(){
897 Ext.fly(dom, INTERNAL).removeCls(className);
902 <span id='Ext-core-Element-method-addClsOnClick'> /**
903 </span> * 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)
904 * @param {String} className
905 * @return {Ext.core.Element} this
907 addClsOnClick : function(className){
909 this.on("mousedown", function(){
910 Ext.fly(dom, INTERNAL).addCls(className);
911 var d = Ext.getDoc(),
913 Ext.fly(dom, INTERNAL).removeCls(className);
914 d.removeListener("mouseup", fn);
916 d.on("mouseup", fn);
921 <span id='Ext-core-Element-method-getViewSize'> /**
922 </span> * <p>Returns the dimensions of the element available to lay content out in.<p>
923 * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
924 * example:<pre><code>
925 var vpSize = Ext.getBody().getViewSize();
927 // all Windows created afterwards will have a default value of 90% height and 95% width
928 Ext.Window.override({
929 width: vpSize.width * 0.9,
930 height: vpSize.height * 0.95
932 // To handle window resizing you would have to hook onto onWindowResize.
933 * </code></pre>
935 * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
936 * To obtain the size including scrollbars, use getStyleSize
938 * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
941 getViewSize : function(){
944 isDoc = (dom == Ext.getDoc().dom || dom == Ext.getBody().dom),
945 style, overflow, ret;
947 // If the body, use static methods
950 width : Ext.core.Element.getViewWidth(),
951 height : Ext.core.Element.getViewHeight()
954 // Else use clientHeight/clientWidth
957 // IE 6 & IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
958 // We will put the overflow back to it's original value when we are done measuring.
959 if (Ext.isIE6 || Ext.isIEQuirks) {
961 overflow = style.overflow;
962 me.setStyle({ overflow: 'hidden'});
965 width : dom.clientWidth,
966 height : dom.clientHeight
968 if (Ext.isIE6 || Ext.isIEQuirks) {
969 me.setStyle({ overflow: overflow });
975 <span id='Ext-core-Element-method-getStyleSize'> /**
976 </span> * <p>Returns the dimensions of the element available to lay content out in.<p>
978 * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
979 * To obtain the size excluding scrollbars, use getViewSize
981 * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
984 getStyleSize : function(){
988 isDoc = (d == doc || d == doc.body),
992 // If the body, use static methods
995 width : Ext.core.Element.getViewWidth(),
996 height : Ext.core.Element.getViewHeight()
999 // Use Styles if they are set
1000 if(s.width && s.width != 'auto'){
1001 w = parseFloat(s.width);
1002 if(me.isBorderBox()){
1003 w -= me.getFrameWidth('lr');
1006 // Use Styles if they are set
1007 if(s.height && s.height != 'auto'){
1008 h = parseFloat(s.height);
1009 if(me.isBorderBox()){
1010 h -= me.getFrameWidth('tb');
1013 // Use getWidth/getHeight if style not set.
1014 return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
1017 <span id='Ext-core-Element-method-getSize'> /**
1018 </span> * Returns the size of the element.
1019 * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
1020 * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
1022 getSize : function(contentSize){
1023 return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
1026 <span id='Ext-core-Element-method-repaint'> /**
1027 </span> * Forces the browser to repaint this element
1028 * @return {Ext.core.Element} this
1030 repaint : function(){
1032 this.addCls(Ext.baseCSSPrefix + 'repaint');
1033 setTimeout(function(){
1034 Ext.fly(dom).removeCls(Ext.baseCSSPrefix + 'repaint');
1039 <span id='Ext-core-Element-method-unselectable'> /**
1040 </span> * Disables text selection for this element (normalized across browsers)
1041 * @return {Ext.core.Element} this
1043 unselectable : function(){
1045 me.dom.unselectable = "on";
1047 me.swallowEvent("selectstart", true);
1048 me.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
1049 me.addCls(Ext.baseCSSPrefix + 'unselectable');
1054 <span id='Ext-core-Element-method-getMargin'> /**
1055 </span> * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
1056 * then it returns the calculated width of the sides (see getPadding)
1057 * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
1058 * @return {Object/Number}
1060 getMargin : function(side){
1062 hash = {t:"top", l:"left", r:"right", b: "bottom"},
1067 for (key in me.margins){
1068 o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
1072 return me.addStyles.call(me, side, me.margins);