/ext-4.0.7/docs/source/Element.style.html

https://bitbucket.org/srogerf/javascript · HTML · 1141 lines · 1040 code · 101 blank · 0 comment · 0 complexity · d741833c5720b5a2893f0444b3b3df07 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js"><span id='Ext-Element'>/**
    19. 

  19. </span> * @class Ext.Element
    20. 

  20.  */
    21. 

  21. (function(){
    22. 

  22.     // local style camelizing for speed
    23. 

  23.     var ELEMENT = Ext.Element,
    24. 

  24.         supports = Ext.supports,
    25. 

  25.         view = document.defaultView,
    26. 

  26.         opacityRe = /alpha\(opacity=(.*)\)/i,
    27. 

  27.         trimRe = /^\s+|\s+$/g,
    28. 

  28.         spacesRe = /\s+/,
    29. 

  29.         wordsRe = /\w/g,
    30. 

  30.         adjustDirect2DTableRe = /table-row|table-.*-group/,
    31. 

  31.         INTERNAL = '_internal',
    32. 

  32.         PADDING = 'padding',
    33. 

  33.         MARGIN = 'margin',
    34. 

  34.         BORDER = 'border',
    35. 

  35.         LEFT = '-left',
    36. 

  36.         RIGHT = '-right',
    37. 

  37.         TOP = '-top',
    38. 

  38.         BOTTOM = '-bottom',
    39. 

  39.         WIDTH = '-width',
    40. 

  40.         MATH = Math,
    41. 

  41.         HIDDEN = 'hidden',
    42. 

  42.         ISCLIPPED = 'isClipped',
    43. 

  43.         OVERFLOW = 'overflow',
    44. 

  44.         OVERFLOWX = 'overflow-x',
    45. 

  45.         OVERFLOWY = 'overflow-y',
    46. 

  46.         ORIGINALCLIP = 'originalClip',
    47. 

  47.         // special markup used throughout Ext when box wrapping elements
    48. 

  48.         borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
    49. 

  49.         paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
    50. 

  50.         margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
    51. 

  51.         data = ELEMENT.data;
    52. 

  52. 

  53.     ELEMENT.boxMarkup = '&lt;div class=&quot;{0}-tl&quot;&gt;&lt;div class=&quot;{0}-tr&quot;&gt;&lt;div class=&quot;{0}-tc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-ml&quot;&gt;&lt;div class=&quot;{0}-mr&quot;&gt;&lt;div class=&quot;{0}-mc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-bl&quot;&gt;&lt;div class=&quot;{0}-br&quot;&gt;&lt;div class=&quot;{0}-bc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
    54. 

  54. 

  55.     // These property values are read from the parentNode if they cannot be read
    56. 

  56.     // from the child:
    57. 

  57.     ELEMENT.inheritedProps = {
    58. 

  58.         fontSize: 1,
    59. 

  59.         fontStyle: 1,
    60. 

  60.         opacity: 1
    61. 

  61.     };
    62. 

  62. 

  63.     Ext.override(ELEMENT, {
    64. 

  64. 

  65. <span id='Ext-Element-method-adjustWidth'>        /**
    66. 

  66. </span>         * TODO: Look at this
    67. 

  67.          */
    68. 

  68.         // private  ==&gt; used by Fx
    69. 

  69.         adjustWidth : function(width) {
    70. 

  70.             var me = this,
    71. 

  71.                 isNum = (typeof width == 'number');
    72. 

  72. 

  73.             if(isNum &amp;&amp; me.autoBoxAdjust &amp;&amp; !me.isBorderBox()){
    74. 

  74.                width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
    75. 

  75.             }
    76. 

  76.             return (isNum &amp;&amp; width &lt; 0) ? 0 : width;
    77. 

  77.         },
    78. 

  78. 

  79.         // private   ==&gt; used by Fx
    80. 

  80.         adjustHeight : function(height) {
    81. 

  81.             var me = this,
    82. 

  82.                 isNum = (typeof height == &quot;number&quot;);
    83. 

  83. 

  84.             if(isNum &amp;&amp; me.autoBoxAdjust &amp;&amp; !me.isBorderBox()){
    85. 

  85.                height -= (me.getBorderWidth(&quot;tb&quot;) + me.getPadding(&quot;tb&quot;));
    86. 

  86.             }
    87. 

  87.             return (isNum &amp;&amp; height &lt; 0) ? 0 : height;
    88. 

  88.         },
    89. 

  89. 

  90. 

  91. <span id='Ext-Element-method-addCls'>        /**
    92. 

  92. </span>         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
    93. 

  93.          * @param {String/String[]} className The CSS classes to add separated by space, or an array of classes
    94. 

  94.          * @return {Ext.Element} this
    95. 

  95.          */
    96. 

  96.         addCls : function(className){
    97. 

  97.             var me = this,
    98. 

  98.                 cls = [],
    99. 

  99.                 space = ((me.dom.className.replace(trimRe, '') == '') ? &quot;&quot; : &quot; &quot;),
    100. 

  100.                 i, len, v;
    101. 

  101.             if (className === undefined) {
    102. 

  102.                 return me;
    103. 

  103.             }
    104. 

  104.             // Separate case is for speed
    105. 

  105.             if (Object.prototype.toString.call(className) !== '[object Array]') {
    106. 

  106.                 if (typeof className === 'string') {
    107. 

  107.                     className = className.replace(trimRe, '').split(spacesRe);
    108. 

  108.                     if (className.length === 1) {
    109. 

  109.                         className = className[0];
    110. 

  110.                         if (!me.hasCls(className)) {
    111. 

  111.                             me.dom.className += space + className;
    112. 

  112.                         }
    113. 

  113.                     } else {
    114. 

  114.                         this.addCls(className);
    115. 

  115.                     }
    116. 

  116.                 }
    117. 

  117.             } else {
    118. 

  118.                 for (i = 0, len = className.length; i &lt; len; i++) {
    119. 

  119.                     v = className[i];
    120. 

  120.                     if (typeof v == 'string' &amp;&amp; (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) {
    121. 

  121.                         cls.push(v);
    122. 

  122.                     }
    123. 

  123.                 }
    124. 

  124.                 if (cls.length) {
    125. 

  125.                     me.dom.className += space + cls.join(&quot; &quot;);
    126. 

  126.                 }
    127. 

  127.             }
    128. 

  128.             return me;
    129. 

  129.         },
    130. 

  130. 

  131. <span id='Ext-Element-method-removeCls'>        /**
    132. 

  132. </span>         * Removes one or more CSS classes from the element.
    133. 

  133.          * @param {String/String[]} className The CSS classes to remove separated by space, or an array of classes
    134. 

  134.          * @return {Ext.Element} this
    135. 

  135.          */
    136. 

  136.         removeCls : function(className){
    137. 

  137.             var me = this,
    138. 

  138.                 i, idx, len, cls, elClasses;
    139. 

  139.             if (className === undefined) {
    140. 

  140.                 return me;
    141. 

  141.             }
    142. 

  142.             if (Object.prototype.toString.call(className) !== '[object Array]') {
    143. 

  143.                 className = className.replace(trimRe, '').split(spacesRe);
    144. 

  144.             }
    145. 

  145.             if (me.dom &amp;&amp; me.dom.className) {
    146. 

  146.                 elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
    147. 

  147.                 for (i = 0, len = className.length; i &lt; len; i++) {
    148. 

  148.                     cls = className[i];
    149. 

  149.                     if (typeof cls == 'string') {
    150. 

  150.                         cls = cls.replace(trimRe, '');
    151. 

  151.                         idx = Ext.Array.indexOf(elClasses, cls);
    152. 

  152.                         if (idx != -1) {
    153. 

  153.                             Ext.Array.erase(elClasses, idx, 1);
    154. 

  154.                         }
    155. 

  155.                     }
    156. 

  156.                 }
    157. 

  157.                 me.dom.className = elClasses.join(&quot; &quot;);
    158. 

  158.             }
    159. 

  159.             return me;
    160. 

  160.         },
    161. 

  161. 

  162. <span id='Ext-Element-method-radioCls'>        /**
    163. 

  163. </span>         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
    164. 

  164.          * @param {String/String[]} className The CSS class to add, or an array of classes
    165. 

  165.          * @return {Ext.Element} this
    166. 

  166.          */
    167. 

  167.         radioCls : function(className){
    168. 

  168.             var cn = this.dom.parentNode.childNodes,
    169. 

  169.                 v, i, len;
    170. 

  170.             className = Ext.isArray(className) ? className : [className];
    171. 

  171.             for (i = 0, len = cn.length; i &lt; len; i++) {
    172. 

  172.                 v = cn[i];
    173. 

  173.                 if (v &amp;&amp; v.nodeType == 1) {
    174. 

  174.                     Ext.fly(v, '_internal').removeCls(className);
    175. 

  175.                 }
    176. 

  176.             }
    177. 

  177.             return this.addCls(className);
    178. 

  178.         },
    179. 

  179. 

  180. <span id='Ext-Element-method-toggleCls'>        /**
    181. 

  181. </span>         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
    182. 

  182.          * @param {String} className The CSS class to toggle
    183. 

  183.          * @return {Ext.Element} this
    184. 

  184.          * @method
    185. 

  185.          */
    186. 

  186.         toggleCls : Ext.supports.ClassList ?
    187. 

  187.             function(className) {
    188. 

  188.                 this.dom.classList.toggle(Ext.String.trim(className));
    189. 

  189.                 return this;
    190. 

  190.             } :
    191. 

  191.             function(className) {
    192. 

  192.                 return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
    193. 

  193.             },
    194. 

  194. 

  195. <span id='Ext-Element-method-hasCls'>        /**
    196. 

  196. </span>         * Checks if the specified CSS class exists on this element's DOM node.
    197. 

  197.          * @param {String} className The CSS class to check for
    198. 

  198.          * @return {Boolean} True if the class exists, else false
    199. 

  199.          * @method
    200. 

  200.          */
    201. 

  201.         hasCls : Ext.supports.ClassList ?
    202. 

  202.             function(className) {
    203. 

  203.                 if (!className) {
    204. 

  204.                     return false;
    205. 

  205.                 }
    206. 

  206.                 className = className.split(spacesRe);
    207. 

  207.                 var ln = className.length,
    208. 

  208.                     i = 0;
    209. 

  209.                 for (; i &lt; ln; i++) {
    210. 

  210.                     if (className[i] &amp;&amp; this.dom.classList.contains(className[i])) {
    211. 

  211.                         return true;
    212. 

  212.                     }
    213. 

  213.                 }
    214. 

  214.                 return false;
    215. 

  215.             } :
    216. 

  216.             function(className){
    217. 

  217.                 return className &amp;&amp; (' ' + this.dom.className + ' ').indexOf(' ' + className + ' ') != -1;
    218. 

  218.             },
    219. 

  219. 

  220. <span id='Ext-Element-method-replaceCls'>        /**
    221. 

  221. </span>         * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
    222. 

  222.          * @param {String} oldClassName The CSS class to replace
    223. 

  223.          * @param {String} newClassName The replacement CSS class
    224. 

  224.          * @return {Ext.Element} this
    225. 

  225.          */
    226. 

  226.         replaceCls : function(oldClassName, newClassName){
    227. 

  227.             return this.removeCls(oldClassName).addCls(newClassName);
    228. 

  228.         },
    229. 

  229. 

  230.         isStyle : function(style, val) {
    231. 

  231.             return this.getStyle(style) == val;
    232. 

  232.         },
    233. 

  233. 

  234. <span id='Ext-Element-method-getStyle'>        /**
    235. 

  235. </span>         * Normalizes currentStyle and computedStyle.
    236. 

  236.          * @param {String} property The style property whose value is returned.
    237. 

  237.          * @return {String} The current value of the style property for this element.
    238. 

  238.          * @method
    239. 

  239.          */
    240. 

  240.         getStyle : function() {
    241. 

  241.             return view &amp;&amp; view.getComputedStyle ?
    242. 

  242.                 function(prop){
    243. 

  243.                     var el = this.dom,
    244. 

  244.                         v, cs, out, display, cleaner;
    245. 

  245. 

  246.                     if(el == document){
    247. 

  247.                         return null;
    248. 

  248.                     }
    249. 

  249.                     prop = ELEMENT.normalize(prop);
    250. 

  250.                     out = (v = el.style[prop]) ? v :
    251. 

  251.                            (cs = view.getComputedStyle(el, &quot;&quot;)) ? cs[prop] : null;
    252. 

  252. 

  253.                     // Ignore cases when the margin is correctly reported as 0, the bug only shows
    254. 

  254.                     // numbers larger.
    255. 

  255.                     if(prop == 'marginRight' &amp;&amp; out != '0px' &amp;&amp; !supports.RightMargin){
    256. 

  256.                         cleaner = ELEMENT.getRightMarginFixCleaner(el);
    257. 

  257.                         display = this.getStyle('display');
    258. 

  258.                         el.style.display = 'inline-block';
    259. 

  259.                         out = view.getComputedStyle(el, '').marginRight;
    260. 

  260.                         el.style.display = display;
    261. 

  261.                         cleaner();
    262. 

  262.                     }
    263. 

  263. 

  264.                     if(prop == 'backgroundColor' &amp;&amp; out == 'rgba(0, 0, 0, 0)' &amp;&amp; !supports.TransparentColor){
    265. 

  265.                         out = 'transparent';
    266. 

  266.                     }
    267. 

  267.                     return out;
    268. 

  268.                 } :
    269. 

  269.                 function (prop) {
    270. 

  270.                     var el = this.dom,
    271. 

  271.                         m, cs;
    272. 

  272. 

  273.                     if (el == document) {
    274. 

  274.                         return null;
    275. 

  275.                     }
    276. 

  276.                     prop = ELEMENT.normalize(prop);
    277. 

  277. 

  278.                     do {
    279. 

  279.                         if (prop == 'opacity') {
    280. 

  280.                             if (el.style.filter.match) {
    281. 

  281.                                 m = el.style.filter.match(opacityRe);
    282. 

  282.                                 if(m){
    283. 

  283.                                     var fv = parseFloat(m[1]);
    284. 

  284.                                     if(!isNaN(fv)){
    285. 

  285.                                         return fv ? fv / 100 : 0;
    286. 

  286.                                     }
    287. 

  287.                                 }
    288. 

  288.                             }
    289. 

  289.                             return 1;
    290. 

  290.                         }
    291. 

  291. 

  292.                         // the try statement does have a cost, so we avoid it unless we are
    293. 

  293.                         // on IE6
    294. 

  294.                         if (!Ext.isIE6) {
    295. 

  295.                             return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
    296. 

  296.                         }
    297. 

  297. 

  298.                         try {
    299. 

  299.                             return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
    300. 

  300.                         } catch (e) {
    301. 

  301.                             // in some cases, IE6 will throw Invalid Argument for properties
    302. 

  302.                             // like fontSize (see in /examples/tabs/tabs.html).
    303. 

  303.                         }
    304. 

  304. 

  305.                         if (!ELEMENT.inheritedProps[prop]) {
    306. 

  306.                             break;
    307. 

  307.                         }
    308. 

  308. 

  309.                         el = el.parentNode;
    310. 

  310.                         // this is _not_ perfect, but we can only hope that the style we
    311. 

  311.                         // need is inherited from a parentNode. If not and since IE won't
    312. 

  312.                         // give us the info we need, we are never going to be 100% right.
    313. 

  313.                     } while (el);
    314. 

  314. 

  315.                     //&lt;debug&gt;
    316. 

  316.                     Ext.log({
    317. 

  317.                         level: 'warn',
    318. 

  318.                         msg: 'Failed to get ' + this.dom.id + '.currentStyle.' + prop
    319. 

  319.                     });
    320. 

  320.                     //&lt;/debug&gt;
    321. 

  321.                     return null;
    322. 

  322.                 }
    323. 

  323.         }(),
    324. 

  324. 

  325. <span id='Ext-Element-method-getColor'>        /**
    326. 

  326. </span>         * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
    327. 

  327.          * are convert to standard 6 digit hex color.
    328. 

  328.          * @param {String} attr The css attribute
    329. 

  329.          * @param {String} defaultValue The default value to use when a valid color isn't found
    330. 

  330.          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
    331. 

  331.          * color anims.
    332. 

  332.          */
    333. 

  333.         getColor : function(attr, defaultValue, prefix){
    334. 

  334.             var v = this.getStyle(attr),
    335. 

  335.                 color = prefix || prefix === '' ? prefix : '#',
    336. 

  336.                 h;
    337. 

  337. 

  338.             if(!v || (/transparent|inherit/.test(v))) {
    339. 

  339.                 return defaultValue;
    340. 

  340.             }
    341. 

  341.             if(/^r/.test(v)){
    342. 

  342.                 Ext.each(v.slice(4, v.length -1).split(','), function(s){
    343. 

  343.                     h = parseInt(s, 10);
    344. 

  344.                     color += (h &lt; 16 ? '0' : '') + h.toString(16);
    345. 

  345.                 });
    346. 

  346.             }else{
    347. 

  347.                 v = v.replace('#', '');
    348. 

  348.                 color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
    349. 

  349.             }
    350. 

  350.             return(color.length &gt; 5 ? color.toLowerCase() : defaultValue);
    351. 

  351.         },
    352. 

  352. 

  353. <span id='Ext-Element-method-setStyle'>        /**
    354. 

  354. </span>         * Wrapper for setting style properties, also takes single object parameter of multiple styles.
    355. 

  355.          * @param {String/Object} property The style property to be set, or an object of multiple styles.
    356. 

  356.          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
    357. 

  357.          * @return {Ext.Element} this
    358. 

  358.          */
    359. 

  359.         setStyle : function(prop, value){
    360. 

  360.             var me = this,
    361. 

  361.                 tmp, style;
    362. 

  362. 

  363.             if (!me.dom) {
    364. 

  364.                 return me;
    365. 

  365.             }
    366. 

  366.             if (typeof prop === 'string') {
    367. 

  367.                 tmp = {};
    368. 

  368.                 tmp[prop] = value;
    369. 

  369.                 prop = tmp;
    370. 

  370.             }
    371. 

  371.             for (style in prop) {
    372. 

  372.                 if (prop.hasOwnProperty(style)) {
    373. 

  373.                     value = Ext.value(prop[style], '');
    374. 

  374.                     if (style == 'opacity') {
    375. 

  375.                         me.setOpacity(value);
    376. 

  376.                     }
    377. 

  377.                     else {
    378. 

  378.                         me.dom.style[ELEMENT.normalize(style)] = value;
    379. 

  379.                     }
    380. 

  380.                 }
    381. 

  381.             }
    382. 

  382.             return me;
    383. 

  383.         },
    384. 

  384. 

  385. <span id='Ext-Element-method-setOpacity'>        /**
    386. 

  386. </span>         * Set the opacity of the element
    387. 

  387.          * @param {Number} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
    388. 

  388.          * @param {Boolean/Object} animate (optional) a standard Element animation config object or &lt;tt&gt;true&lt;/tt&gt; for
    389. 

  389.          * the default animation (&lt;tt&gt;{duration: .35, easing: 'easeIn'}&lt;/tt&gt;)
    390. 

  390.          * @return {Ext.Element} this
    391. 

  391.          */
    392. 

  392.         setOpacity: function(opacity, animate) {
    393. 

  393.             var me = this,
    394. 

  394.                 dom = me.dom,
    395. 

  395.                 val,
    396. 

  396.                 style;
    397. 

  397. 

  398.             if (!me.dom) {
    399. 

  399.                 return me;
    400. 

  400.             }
    401. 

  401. 

  402.             style = me.dom.style;
    403. 

  403. 

  404.             if (!animate || !me.anim) {
    405. 

  405.                 if (!Ext.supports.Opacity) {
    406. 

  406.                     opacity = opacity &lt; 1 ? 'alpha(opacity=' + opacity * 100 + ')': '';
    407. 

  407.                     val = style.filter.replace(opacityRe, '').replace(trimRe, '');
    408. 

  408. 

  409.                     style.zoom = 1;
    410. 

  410.                     style.filter = val + (val.length &gt; 0 ? ' ': '') + opacity;
    411. 

  411.                 }
    412. 

  412.                 else {
    413. 

  413.                     style.opacity = opacity;
    414. 

  414.                 }
    415. 

  415.             }
    416. 

  416.             else {
    417. 

  417.                 if (!Ext.isObject(animate)) {
    418. 

  418.                     animate = {
    419. 

  419.                         duration: 350,
    420. 

  420.                         easing: 'ease-in'
    421. 

  421.                     };
    422. 

  422.                 }
    423. 

  423.                 me.animate(Ext.applyIf({
    424. 

  424.                     to: {
    425. 

  425.                         opacity: opacity
    426. 

  426.                     }
    427. 

  427.                 },
    428. 

  428.                 animate));
    429. 

  429.             }
    430. 

  430.             return me;
    431. 

  431.         },
    432. 

  432. 

  433. 

  434. <span id='Ext-Element-method-clearOpacity'>        /**
    435. 

  435. </span>         * Clears any opacity settings from this element. Required in some cases for IE.
    436. 

  436.          * @return {Ext.Element} this
    437. 

  437.          */
    438. 

  438.         clearOpacity : function(){
    439. 

  439.             var style = this.dom.style;
    440. 

  440.             if(!Ext.supports.Opacity){
    441. 

  441.                 if(!Ext.isEmpty(style.filter)){
    442. 

  442.                     style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
    443. 

  443.                 }
    444. 

  444.             }else{
    445. 

  445.                 style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
    446. 

  446.             }
    447. 

  447.             return this;
    448. 

  448.         },
    449. 

  449. 

  450. <span id='Ext-Element-method-adjustDirect2DDimension'>        /**
    451. 

  451. </span>         * @private
    452. 

  452.          * Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
    453. 

  453.          * @return {Number} 0 or 1
    454. 

  454.          */
    455. 

  455.         adjustDirect2DDimension: function(dimension) {
    456. 

  456.             var me = this,
    457. 

  457.                 dom = me.dom,
    458. 

  458.                 display = me.getStyle('display'),
    459. 

  459.                 inlineDisplay = dom.style['display'],
    460. 

  460.                 inlinePosition = dom.style['position'],
    461. 

  461.                 originIndex = dimension === 'width' ? 0 : 1,
    462. 

  462.                 floating;
    463. 

  463. 

  464.             if (display === 'inline') {
    465. 

  465.                 dom.style['display'] = 'inline-block';
    466. 

  466.             }
    467. 

  467. 

  468.             dom.style['position'] = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
    469. 

  469. 

  470.             // floating will contain digits that appears after the decimal point
    471. 

  471.             // if height or width are set to auto we fallback to msTransformOrigin calculation
    472. 

  472.             floating = (parseFloat(me.getStyle(dimension)) || parseFloat(dom.currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
    473. 

  473. 

  474.             dom.style['position'] = inlinePosition;
    475. 

  475. 

  476.             if (display === 'inline') {
    477. 

  477.                 dom.style['display'] = inlineDisplay;
    478. 

  478.             }
    479. 

  479. 

  480.             return floating;
    481. 

  481.         },
    482. 

  482. 

  483. <span id='Ext-Element-method-getHeight'>        /**
    484. 

  484. </span>         * Returns the offset height of the element
    485. 

  485.          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
    486. 

  486.          * @return {Number} The element's height
    487. 

  487.          */
    488. 

  488.         getHeight: function(contentHeight, preciseHeight) {
    489. 

  489.             var me = this,
    490. 

  490.                 dom = me.dom,
    491. 

  491.                 hidden = Ext.isIE &amp;&amp; me.isStyle('display', 'none'),
    492. 

  492.                 height, overflow, style, floating;
    493. 

  493. 

  494.             // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
    495. 

  495.             // We will put the overflow back to it's original value when we are done measuring.
    496. 

  496.             if (Ext.isIEQuirks) {
    497. 

  497.                 style = dom.style;
    498. 

  498.                 overflow = style.overflow;
    499. 

  499.                 me.setStyle({ overflow: 'hidden'});
    500. 

  500.             }
    501. 

  501. 

  502.             height = dom.offsetHeight;
    503. 

  503. 

  504.             height = MATH.max(height, hidden ? 0 : dom.clientHeight) || 0;
    505. 

  505. 

  506.             // IE9 Direct2D dimension rounding bug
    507. 

  507.             if (!hidden &amp;&amp; Ext.supports.Direct2DBug) {
    508. 

  508.                 floating = me.adjustDirect2DDimension('height');
    509. 

  509.                 if (preciseHeight) {
    510. 

  510.                     height += floating;
    511. 

  511.                 }
    512. 

  512.                 else if (floating &gt; 0 &amp;&amp; floating &lt; 0.5) {
    513. 

  513.                     height++;
    514. 

  514.                 }
    515. 

  515.             }
    516. 

  516. 

  517.             if (contentHeight) {
    518. 

  518.                 height -= (me.getBorderWidth(&quot;tb&quot;) + me.getPadding(&quot;tb&quot;));
    519. 

  519.             }
    520. 

  520. 

  521.             if (Ext.isIEQuirks) {
    522. 

  522.                 me.setStyle({ overflow: overflow});
    523. 

  523.             }
    524. 

  524. 

  525.             if (height &lt; 0) {
    526. 

  526.                 height = 0;
    527. 

  527.             }
    528. 

  528.             return height;
    529. 

  529.         },
    530. 

  530. 

  531. <span id='Ext-Element-method-getWidth'>        /**
    532. 

  532. </span>         * Returns the offset width of the element
    533. 

  533.          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
    534. 

  534.          * @return {Number} The element's width
    535. 

  535.          */
    536. 

  536.         getWidth: function(contentWidth, preciseWidth) {
    537. 

  537.             var me = this,
    538. 

  538.                 dom = me.dom,
    539. 

  539.                 hidden = Ext.isIE &amp;&amp; me.isStyle('display', 'none'),
    540. 

  540.                 rect, width, overflow, style, floating, parentPosition;
    541. 

  541. 

  542.             // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
    543. 

  543.             // We will put the overflow back to it's original value when we are done measuring.
    544. 

  544.             if (Ext.isIEQuirks) {
    545. 

  545.                 style = dom.style;
    546. 

  546.                 overflow = style.overflow;
    547. 

  547.                 me.setStyle({overflow: 'hidden'});
    548. 

  548.             }
    549. 

  549. 

  550.             // Fix Opera 10.5x width calculation issues
    551. 

  551.             if (Ext.isOpera10_5) {
    552. 

  552.                 if (dom.parentNode.currentStyle.position === 'relative') {
    553. 

  553.                     parentPosition = dom.parentNode.style.position;
    554. 

  554.                     dom.parentNode.style.position = 'static';
    555. 

  555.                     width = dom.offsetWidth;
    556. 

  556.                     dom.parentNode.style.position = parentPosition;
    557. 

  557.                 }
    558. 

  558.                 width = Math.max(width || 0, dom.offsetWidth);
    559. 

  559. 

  560.             // Gecko will in some cases report an offsetWidth that is actually less than the width of the
    561. 

  561.             // text contents, because it measures fonts with sub-pixel precision but rounds the calculated
    562. 

  562.             // value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
    563. 

  563.             // subpixel measurements so we can force them to always be rounded up. See
    564. 

  564.             // https://bugzilla.mozilla.org/show_bug.cgi?id=458617
    565. 

  565.             } else if (Ext.supports.BoundingClientRect) {
    566. 

  566.                 rect = dom.getBoundingClientRect();
    567. 

  567.                 width = rect.right - rect.left;
    568. 

  568.                 width = preciseWidth ? width : Math.ceil(width);
    569. 

  569.             } else {
    570. 

  570.                 width = dom.offsetWidth;
    571. 

  571.             }
    572. 

  572. 

  573.             width = MATH.max(width, hidden ? 0 : dom.clientWidth) || 0;
    574. 

  574. 

  575.             // IE9 Direct2D dimension rounding bug
    576. 

  576.             if (!hidden &amp;&amp; Ext.supports.Direct2DBug) {
    577. 

  577.                 floating = me.adjustDirect2DDimension('width');
    578. 

  578.                 if (preciseWidth) {
    579. 

  579.                     width += floating;
    580. 

  580.                 }
    581. 

  581.                 else if (floating &gt; 0 &amp;&amp; floating &lt; 0.5) {
    582. 

  582.                     width++;
    583. 

  583.                 }
    584. 

  584.             }
    585. 

  585. 

  586.             if (contentWidth) {
    587. 

  587.                 width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
    588. 

  588.             }
    589. 

  589. 

  590.             if (Ext.isIEQuirks) {
    591. 

  591.                 me.setStyle({ overflow: overflow});
    592. 

  592.             }
    593. 

  593. 

  594.             if (width &lt; 0) {
    595. 

  595.                 width = 0;
    596. 

  596.             }
    597. 

  597.             return width;
    598. 

  598.         },
    599. 

  599. 

  600. <span id='Ext-Element-method-setWidth'>        /**
    601. 

  601. </span>         * Set the width of this Element.
    602. 

  602.          * @param {Number/String} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
    603. 

  603.          * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
    604. 

  604.          * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
    605. 

  605.          * &lt;/ul&gt;&lt;/div&gt;
    606. 

  606.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
    607. 

  607.          * @return {Ext.Element} this
    608. 

  608.          */
    609. 

  609.         setWidth : function(width, animate){
    610. 

  610.             var me = this;
    611. 

  611.             width = me.adjustWidth(width);
    612. 

  612.             if (!animate || !me.anim) {
    613. 

  613.                 me.dom.style.width = me.addUnits(width);
    614. 

  614.             }
    615. 

  615.             else {
    616. 

  616.                 if (!Ext.isObject(animate)) {
    617. 

  617.                     animate = {};
    618. 

  618.                 }
    619. 

  619.                 me.animate(Ext.applyIf({
    620. 

  620.                     to: {
    621. 

  621.                         width: width
    622. 

  622.                     }
    623. 

  623.                 }, animate));
    624. 

  624.             }
    625. 

  625.             return me;
    626. 

  626.         },
    627. 

  627. 

  628. <span id='Ext-Element-method-setHeight'>        /**
    629. 

  629. </span>         * Set the height of this Element.
    630. 

  630.          * &lt;pre&gt;&lt;code&gt;
    631. 

  631. // change the height to 200px and animate with default configuration
    632. 

  632. Ext.fly('elementId').setHeight(200, true);
    633. 

    634. 

  634. // change the height to 150px and animate with a custom configuration
    635. 

  635. Ext.fly('elId').setHeight(150, {
    636. 

  636.     duration : .5, // animation will have a duration of .5 seconds
    637. 

  637.     // will change the content to &quot;finished&quot;
    638. 

  638.     callback: function(){ this.{@link #update}(&quot;finished&quot;); }
    639. 

  639. });
    640. 

  640.          * &lt;/code&gt;&lt;/pre&gt;
    641. 

  641.          * @param {Number/String} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
    642. 

  642.          * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)&lt;/li&gt;
    643. 

  643.          * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
    644. 

  644.          * &lt;/ul&gt;&lt;/div&gt;
    645. 

  645.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
    646. 

  646.          * @return {Ext.Element} this
    647. 

  647.          */
    648. 

  648.          setHeight : function(height, animate){
    649. 

  649.             var me = this;
    650. 

  650.             height = me.adjustHeight(height);
    651. 

  651.             if (!animate || !me.anim) {
    652. 

  652.                 me.dom.style.height = me.addUnits(height);
    653. 

  653.             }
    654. 

  654.             else {
    655. 

  655.                 if (!Ext.isObject(animate)) {
    656. 

  656.                     animate = {};
    657. 

  657.                 }
    658. 

  658.                 me.animate(Ext.applyIf({
    659. 

  659.                     to: {
    660. 

  660.                         height: height
    661. 

  661.                     }
    662. 

  662.                 }, animate));
    663. 

  663.             }
    664. 

  664.             return me;
    665. 

  665.         },
    666. 

  666. 

  667. <span id='Ext-Element-method-getBorderWidth'>        /**
    668. 

  668. </span>         * Gets the width of the border(s) for the specified side(s)
    669. 

  669.          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
    670. 

  670.          * passing &lt;tt&gt;'lr'&lt;/tt&gt; would get the border &lt;b&gt;&lt;u&gt;l&lt;/u&gt;&lt;/b&gt;eft width + the border &lt;b&gt;&lt;u&gt;r&lt;/u&gt;&lt;/b&gt;ight width.
    671. 

  671.          * @return {Number} The width of the sides passed added together
    672. 

  672.          */
    673. 

  673.         getBorderWidth : function(side){
    674. 

  674.             return this.addStyles(side, borders);
    675. 

  675.         },
    676. 

  676. 

  677. <span id='Ext-Element-method-getPadding'>        /**
    678. 

  678. </span>         * Gets the width of the padding(s) for the specified side(s)
    679. 

  679.          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
    680. 

  680.          * passing &lt;tt&gt;'lr'&lt;/tt&gt; would get the padding &lt;b&gt;&lt;u&gt;l&lt;/u&gt;&lt;/b&gt;eft + the padding &lt;b&gt;&lt;u&gt;r&lt;/u&gt;&lt;/b&gt;ight.
    681. 

  681.          * @return {Number} The padding of the sides passed added together
    682. 

  682.          */
    683. 

  683.         getPadding : function(side){
    684. 

  684.             return this.addStyles(side, paddings);
    685. 

  685.         },
    686. 

  686. 

  687. <span id='Ext-Element-method-clip'>        /**
    688. 

  688. </span>         *  Store the current overflow setting and clip overflow on the element - use &lt;tt&gt;{@link #unclip}&lt;/tt&gt; to remove
    689. 

  689.          * @return {Ext.Element} this
    690. 

  690.          */
    691. 

  691.         clip : function(){
    692. 

  692.             var me = this,
    693. 

  693.                 dom = me.dom;
    694. 

  694. 

  695.             if(!data(dom, ISCLIPPED)){
    696. 

  696.                 data(dom, ISCLIPPED, true);
    697. 

  697.                 data(dom, ORIGINALCLIP, {
    698. 

  698.                     o: me.getStyle(OVERFLOW),
    699. 

  699.                     x: me.getStyle(OVERFLOWX),
    700. 

  700.                     y: me.getStyle(OVERFLOWY)
    701. 

  701.                 });
    702. 

  702.                 me.setStyle(OVERFLOW, HIDDEN);
    703. 

  703.                 me.setStyle(OVERFLOWX, HIDDEN);
    704. 

  704.                 me.setStyle(OVERFLOWY, HIDDEN);
    705. 

  705.             }
    706. 

  706.             return me;
    707. 

  707.         },
    708. 

  708. 

  709. <span id='Ext-Element-method-unclip'>        /**
    710. 

  710. </span>         *  Return clipping (overflow) to original clipping before &lt;tt&gt;{@link #clip}&lt;/tt&gt; was called
    711. 

  711.          * @return {Ext.Element} this
    712. 

  712.          */
    713. 

  713.         unclip : function(){
    714. 

  714.             var me = this,
    715. 

  715.                 dom = me.dom,
    716. 

  716.                 clip;
    717. 

  717. 

  718.             if(data(dom, ISCLIPPED)){
    719. 

  719.                 data(dom, ISCLIPPED, false);
    720. 

  720.                 clip = data(dom, ORIGINALCLIP);
    721. 

  721.                 if(clip.o){
    722. 

  722.                     me.setStyle(OVERFLOW, clip.o);
    723. 

  723.                 }
    724. 

  724.                 if(clip.x){
    725. 

  725.                     me.setStyle(OVERFLOWX, clip.x);
    726. 

  726.                 }
    727. 

  727.                 if(clip.y){
    728. 

  728.                     me.setStyle(OVERFLOWY, clip.y);
    729. 

  729.                 }
    730. 

  730.             }
    731. 

  731.             return me;
    732. 

  732.         },
    733. 

  733. 

  734.         // private
    735. 

  735.         addStyles : function(sides, styles){
    736. 

  736.             var totalSize = 0,
    737. 

  737.                 sidesArr = sides.match(wordsRe),
    738. 

  738.                 i = 0,
    739. 

  739.                 len = sidesArr.length,
    740. 

  740.                 side, size;
    741. 

  741.             for (; i &lt; len; i++) {
    742. 

  742.                 side = sidesArr[i];
    743. 

  743.                 size = side &amp;&amp; parseInt(this.getStyle(styles[side]), 10);
    744. 

  744.                 if (size) {
    745. 

  745.                     totalSize += MATH.abs(size);
    746. 

  746.                 }
    747. 

  747.             }
    748. 

  748.             return totalSize;
    749. 

  749.         },
    750. 

  750. 

  751.         margins : margins,
    752. 

  752. 

  753. <span id='Ext-Element-method-applyStyles'>        /**
    754. 

  754. </span>         * More flexible version of {@link #setStyle} for setting style properties.
    755. 

  755.          * @param {String/Object/Function} styles A style specification string, e.g. &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
    756. 

  756.          * a function which returns such a specification.
    757. 

  757.          * @return {Ext.Element} this
    758. 

  758.          */
    759. 

  759.         applyStyles : function(style){
    760. 

  760.             Ext.DomHelper.applyStyles(this.dom, style);
    761. 

  761.             return this;
    762. 

  762.         },
    763. 

  763. 

  764. <span id='Ext-Element-method-getStyles'>        /**
    765. 

  765. </span>         * Returns an object with properties matching the styles requested.
    766. 

  766.          * For example, el.getStyles('color', 'font-size', 'width') might return
    767. 

  767.          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
    768. 

  768.          * @param {String} style1 A style name
    769. 

  769.          * @param {String} style2 A style name
    770. 

  770.          * @param {String} etc.
    771. 

  771.          * @return {Object} The style object
    772. 

  772.          */
    773. 

  773.         getStyles : function(){
    774. 

  774.             var styles = {},
    775. 

  775.                 len = arguments.length,
    776. 

  776.                 i = 0, style;
    777. 

  777. 

  778.             for(; i &lt; len; ++i) {
    779. 

  779.                 style = arguments[i];
    780. 

  780.                 styles[style] = this.getStyle(style);
    781. 

  781.             }
    782. 

  782.             return styles;
    783. 

  783.         },
    784. 

  784. 

  785. <span id='Ext-Element-method-boxWrap'>       /**
    786. 

  786. </span>        * &lt;p&gt;Wraps the specified element with a special 9 element markup/CSS block that renders by default as
    787. 

  787.         * a gray container with a gradient background, rounded corners and a 4-way shadow.&lt;/p&gt;
    788. 

  788.         * &lt;p&gt;This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
    789. 

  789.         * {@link Ext.panel.Panel} when &lt;tt&gt;{@link Ext.panel.Panel#frame frame=true}&lt;/tt&gt;, {@link Ext.window.Window}).  The markup
    790. 

  790.         * is of this form:&lt;/p&gt;
    791. 

  791.         * &lt;pre&gt;&lt;code&gt;
    792. 

  792.     Ext.Element.boxMarkup =
    793. 

  793.     &amp;#39;&amp;lt;div class=&quot;{0}-tl&quot;&gt;&amp;lt;div class=&quot;{0}-tr&quot;&gt;&amp;lt;div class=&quot;{0}-tc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
    794. 

  794.      &amp;lt;div class=&quot;{0}-ml&quot;&gt;&amp;lt;div class=&quot;{0}-mr&quot;&gt;&amp;lt;div class=&quot;{0}-mc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
    795. 

  795.      &amp;lt;div class=&quot;{0}-bl&quot;&gt;&amp;lt;div class=&quot;{0}-br&quot;&gt;&amp;lt;div class=&quot;{0}-bc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;#39;;
    796. 

  796.         * &lt;/code&gt;&lt;/pre&gt;
    797. 

  797.         * &lt;p&gt;Example usage:&lt;/p&gt;
    798. 

  798.         * &lt;pre&gt;&lt;code&gt;
    799. 

  799.     // Basic box wrap
    800. 

  800.     Ext.get(&quot;foo&quot;).boxWrap();
    801. 

    802. 

  802.     // You can also add a custom class and use CSS inheritance rules to customize the box look.
    803. 

  803.     // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
    804. 

  804.     // for how to create a custom box wrap style.
    805. 

  805.     Ext.get(&quot;foo&quot;).boxWrap().addCls(&quot;x-box-blue&quot;);
    806. 

  806.         * &lt;/code&gt;&lt;/pre&gt;
    807. 

  807.         * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
    808. 

  808.         * (defaults to &lt;tt&gt;'x-box'&lt;/tt&gt;). Note that there are a number of CSS rules that are dependent on
    809. 

  809.         * this name to make the overall effect work, so if you supply an alternate base class, make sure you
    810. 

  810.         * also supply all of the necessary rules.
    811. 

  811.         * @return {Ext.Element} The outermost wrapping element of the created box structure.
    812. 

  812.         */
    813. 

  813.         boxWrap : function(cls){
    814. 

  814.             cls = cls || Ext.baseCSSPrefix + 'box';
    815. 

  815.             var el = Ext.get(this.insertHtml(&quot;beforeBegin&quot;, &quot;&lt;div class='&quot; + cls + &quot;'&gt;&quot; + Ext.String.format(ELEMENT.boxMarkup, cls) + &quot;&lt;/div&gt;&quot;));
    816. 

  816.             Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
    817. 

  817.             return el;
    818. 

  818.         },
    819. 

  819. 

  820. <span id='Ext-Element-method-setSize'>        /**
    821. 

  821. </span>         * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
    822. 

  822.          * @param {Number/String} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
    823. 

  823.          * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
    824. 

  824.          * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
    825. 

  825.          * &lt;li&gt;A size object in the format &lt;code&gt;{width: widthValue, height: heightValue}&lt;/code&gt;.&lt;/li&gt;
    826. 

  826.          * &lt;/ul&gt;&lt;/div&gt;
    827. 

  827.          * @param {Number/String} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
    828. 

  828.          * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
    829. 

  829.          * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
    830. 

  830.          * &lt;/ul&gt;&lt;/div&gt;
    831. 

  831.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
    832. 

  832.          * @return {Ext.Element} this
    833. 

  833.          */
    834. 

  834.         setSize : function(width, height, animate){
    835. 

  835.             var me = this;
    836. 

  836.             if (Ext.isObject(width)) { // in case of object from getSize()
    837. 

  837.                 animate = height;
    838. 

  838.                 height = width.height;
    839. 

  839.                 width = width.width;
    840. 

  840.             }
    841. 

  841.             width = me.adjustWidth(width);
    842. 

  842.             height = me.adjustHeight(height);
    843. 

  843.             if(!animate || !me.anim){
    844. 

  844.                 // Must touch some property before setting style.width/height on non-quirk IE6,7, or the
    845. 

  845.                 // properties will not reflect the changes on the style immediately
    846. 

  846.                 if (!Ext.isIEQuirks &amp;&amp; (Ext.isIE6 || Ext.isIE7)) {
    847. 

  847.                     me.dom.offsetTop;
    848. 

  848.                 }
    849. 

  849.                 me.dom.style.width = me.addUnits(width);
    850. 

  850.                 me.dom.style.height = me.addUnits(height);
    851. 

  851.             }
    852. 

  852.             else {
    853. 

  853.                 if (animate === true) {
    854. 

  854.                     animate = {};
    855. 

  855.                 }
    856. 

  856.                 me.animate(Ext.applyIf({
    857. 

  857.                     to: {
    858. 

  858.                         width: width,
    859. 

  859.                         height: height
    860. 

  860.                     }
    861. 

  861.                 }, animate));
    862. 

  862.             }
    863. 

  863.             return me;
    864. 

  864.         },
    865. 

  865. 

  866. <span id='Ext-Element-method-getComputedHeight'>        /**
    867. 

  867. </span>         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
    868. 

  868.          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
    869. 

  869.          * if a height has not been set using CSS.
    870. 

  870.          * @return {Number}
    871. 

  871.          */
    872. 

  872.         getComputedHeight : function(){
    873. 

  873.             var me = this,
    874. 

  874.                 h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
    875. 

  875.             if(!h){
    876. 

  876.                 h = parseFloat(me.getStyle('height')) || 0;
    877. 

  877.                 if(!me.isBorderBox()){
    878. 

  878.                     h += me.getFrameWidth('tb');
    879. 

  879.                 }
    880. 

  880.             }
    881. 

  881.             return h;
    882. 

  882.         },
    883. 

  883. 

  884. <span id='Ext-Element-method-getComputedWidth'>        /**
    885. 

  885. </span>         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
    886. 

  886.          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
    887. 

  887.          * if a width has not been set using CSS.
    888. 

  888.          * @return {Number}
    889. 

  889.          */
    890. 

  890.         getComputedWidth : function(){
    891. 

  891.             var me = this,
    892. 

  892.                 w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
    893. 

  893. 

  894.             if(!w){
    895. 

  895.                 w = parseFloat(me.getStyle('width')) || 0;
    896. 

  896.                 if(!me.isBorderBox()){
    897. 

  897.                     w += me.getFrameWidth('lr');
    898. 

  898.                 }
    899. 

  899.             }
    900. 

  900.             return w;
    901. 

  901.         },
    902. 

  902. 

  903. <span id='Ext-Element-method-getFrameWidth'>        /**
    904. 

  904. </span>         * Returns the sum width of the padding and borders for the passed &quot;sides&quot;. See getBorderWidth()
    905. 

  905.          for more information about the sides.
    906. 

  906.          * @param {String} sides
    907. 

  907.          * @return {Number}
    908. 

  908.          */
    909. 

  909.         getFrameWidth : function(sides, onlyContentBox){
    910. 

  910.             return onlyContentBox &amp;&amp; this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
    911. 

  911.         },
    912. 

  912. 

  913. <span id='Ext-Element-method-addClsOnOver'>        /**
    914. 

  914. </span>         * Sets up event handlers to add and remove a css class when the mouse is over this element
    915. 

  915.          * @param {String} className
    916. 

  916.          * @return {Ext.Element} this
    917. 

  917.          */
    918. 

  918.         addClsOnOver : function(className){
    919. 

  919.             var dom = this.dom;
    920. 

  920.             this.hover(
    921. 

  921.                 function(){
    922. 

  922.                     Ext.fly(dom, INTERNAL).addCls(className);
    923. 

  923.                 },
    924. 

  924.                 function(){
    925. 

  925.                     Ext.fly(dom, INTERNAL).removeCls(className);
    926. 

  926.                 }
    927. 

  927.             );
    928. 

  928.             return this;
    929. 

  929.         },
    930. 

  930. 

  931. <span id='Ext-Element-method-addClsOnFocus'>        /**
    932. 

  932. </span>         * Sets up event handlers to add and remove a css class when this element has the focus
    933. 

  933.          * @param {String} className
    934. 

  934.          * @return {Ext.Element} this
    935. 

  935.          */
    936. 

  936.         addClsOnFocus : function(className){
    937. 

  937.             var me = this,
    938. 

  938.                 dom = me.dom;
    939. 

  939.             me.on(&quot;focus&quot;, function(){
    940. 

  940.                 Ext.fly(dom, INTERNAL).addCls(className);
    941. 

  941.             });
    942. 

  942.             me.on(&quot;blur&quot;, function(){
    943. 

  943.                 Ext.fly(dom, INTERNAL).removeCls(className);
    944. 

  944.             });
    945. 

  945.             return me;
    946. 

  946.         },
    947. 

  947. 

  948. <span id='Ext-Element-method-addClsOnClick'>        /**
    949. 

  949. </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)
    950. 

  950.          * @param {String} className
    951. 

  951.          * @return {Ext.Element} this
    952. 

  952.          */
    953. 

  953.         addClsOnClick : function(className){
    954. 

  954.             var dom = this.dom;
    955. 

  955.             this.on(&quot;mousedown&quot;, function(){
    956. 

  956.                 Ext.fly(dom, INTERNAL).addCls(className);
    957. 

  957.                 var d = Ext.getDoc(),
    958. 

  958.                     fn = function(){
    959. 

  959.                         Ext.fly(dom, INTERNAL).removeCls(className);
    960. 

  960.                         d.removeListener(&quot;mouseup&quot;, fn);
    961. 

  961.                     };
    962. 

  962.                 d.on(&quot;mouseup&quot;, fn);
    963. 

  963.             });
    964. 

  964.             return this;
    965. 

  965.         },
    966. 

  966. 

  967. <span id='Ext-Element-method-getViewSize'>        /**
    968. 

  968. </span>         * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
    969. 

  969.          * &lt;p&gt;If the element (or any ancestor element) has CSS style &lt;code&gt;display : none&lt;/code&gt;, the dimensions will be zero.&lt;/p&gt;
    970. 

  970.          * example:&lt;pre&gt;&lt;code&gt;
    971. 

  971.         var vpSize = Ext.getBody().getViewSize();
    972. 

    973. 

  973.         // all Windows created afterwards will have a default value of 90% height and 95% width
    974. 

  974.         Ext.Window.override({
    975. 

  975.             width: vpSize.width * 0.9,
    976. 

  976.             height: vpSize.height * 0.95
    977. 

  977.         });
    978. 

  978.         // To handle window resizing you would have to hook onto onWindowResize.
    979. 

  979.         * &lt;/code&gt;&lt;/pre&gt;
    980. 

  980.         *
    981. 

  981.         * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
    982. 

  982.         * To obtain the size including scrollbars, use getStyleSize
    983. 

  983.         *
    984. 

  984.         * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
    985. 

  985.         */
    986. 

  986. 

  987.         getViewSize : function(){
    988. 

  988.             var me = this,
    989. 

  989.                 dom = me.dom,
    990. 

  990.                 isDoc = (dom == Ext.getDoc().dom || dom == Ext.getBody().dom),
    991. 

  991.                 style, overflow, ret;
    992. 

  992. 

  993.             // If the body, use static methods
    994. 

  994.             if (isDoc) {
    995. 

  995.                 ret = {
    996. 

  996.                     width : ELEMENT.getViewWidth(),
    997. 

  997.                     height : ELEMENT.getViewHeight()
    998. 

  998.                 };
    999. 

  999. 

  1000.             // Else use clientHeight/clientWidth
    1001. 

  1001.             }
    1002. 

  1002.             else {
    1003. 

  1003.                 // IE 6 &amp; IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
    1004. 

  1004.                 // We will put the overflow back to it's original value when we are done measuring.
    1005. 

  1005.                 if (Ext.isIE6 || Ext.isIEQuirks) {
    1006. 

  1006.                     style = dom.style;
    1007. 

  1007.                     overflow = style.overflow;
    1008. 

  1008.                     me.setStyle({ overflow: 'hidden'});
    1009. 

  1009.                 }
    1010. 

  1010.                 ret = {
    1011. 

  1011.                     width : dom.clientWidth,
    1012. 

  1012.                     height : dom.clientHeight
    1013. 

  1013.                 };
    1014. 

  1014.                 if (Ext.isIE6 || Ext.isIEQuirks) {
    1015. 

  1015.                     me.setStyle({ overflow: overflow });
    1016. 

  1016.                 }
    1017. 

  1017.             }
    1018. 

  1018.             return ret;
    1019. 

  1019.         },
    1020. 

  1020. 

  1021. <span id='Ext-Element-method-getStyleSize'>        /**
    1022. 

  1022. </span>        * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
    1023. 

  1023.         *
    1024. 

  1024.         * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
    1025. 

  1025.         * To obtain the size excluding scrollbars, use getViewSize
    1026. 

  1026.         *
    1027. 

  1027.         * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
    1028. 

  1028.         */
    1029. 

  1029. 

  1030.         getStyleSize : function(){
    1031. 

  1031.             var me = this,
    1032. 

  1032.                 doc = document,
    1033. 

  1033.                 d = this.dom,
    1034. 

  1034.                 isDoc = (d == doc || d == doc.body),
    1035. 

  1035.                 s = d.style,
    1036. 

  1036.                 w, h;
    1037. 

  1037. 

  1038.             // If the body, use static methods
    1039. 

  1039.             if (isDoc) {
    1040. 

  1040.                 return {
    1041. 

  1041.                     width : ELEMENT.getViewWidth(),
    1042. 

  1042.                     height : ELEMENT.getViewHeight()
    1043. 

  1043.                 };
    1044. 

  1044.             }
    1045. 

  1045.             // Use Styles if they are set
    1046. 

  1046.             if(s.width &amp;&amp; s.width != 'auto'){
    1047. 

  1047.                 w = parseFloat(s.width);
    1048. 

  1048.                 if(me.isBorderBox()){
    1049. 

  1049.                    w -= me.getFrameWidth('lr');
    1050. 

  1050.                 }
    1051. 

  1051.             }
    1052. 

  1052.             // Use Styles if they are set
    1053. 

  1053.             if(s.height &amp;&amp; s.height != 'auto'){
    1054. 

  1054.                 h = parseFloat(s.height);
    1055. 

  1055.                 if(me.isBorderBox()){
    1056. 

  1056.                    h -= me.getFrameWidth('tb');
    1057. 

  1057.                 }
    1058. 

  1058.             }
    1059. 

  1059.             // Use getWidth/getHeight if style not set.
    1060. 

  1060.             return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
    1061. 

  1061.         },
    1062. 

  1062. 

  1063. <span id='Ext-Element-method-getSize'>        /**
    1064. 

  1064. </span>         * Returns the size of the element.
    1065. 

  1065.          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
    1066. 

  1066.          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
    1067. 

  1067.          */
    1068. 

  1068.         getSize : function(contentSize){
    1069. 

  1069.             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
    1070. 

  1070.         },
    1071. 

  1071. 

  1072. <span id='Ext-Element-method-repaint'>        /**
    1073. 

  1073. </span>         * Forces the browser to repaint this element
    1074. 

  1074.          * @return {Ext.Element} this
    1075. 

  1075.          */
    1076. 

  1076.         repaint : function(){
    1077. 

  1077.             var dom = this.dom;
    1078. 

  1078.             this.addCls(Ext.baseCSSPrefix + 'repaint');
    1079. 

  1079.             setTimeout(function(){
    1080. 

  1080.                 Ext.fly(dom).removeCls(Ext.baseCSSPrefix + 'repaint');
    1081. 

  1081.             }, 1);
    1082. 

  1082.             return this;
    1083. 

  1083.         },
    1084. 

  1084. 

  1085. <span id='Ext-Element-method-selectable'>        /**
    1086. 

  1086. </span>         * Enable text selection for this element (normalized across browsers)
    1087. 

  1087.          * @return {Ext.Element} this
    1088. 

  1088.          */
    1089. 

  1089.         selectable : function() {
    1090. 

  1090.             var me = this;
    1091. 

  1091.             me.dom.unselectable = &quot;off&quot;;
    1092. 

  1092.             // Prevent it from bubles up and enables it to be selectable
    1093. 

  1093.             me.on('selectstart', function (e) {
    1094. 

  1094.                 e.stopPropagation();
    1095. 

  1095.                 return true;
    1096. 

  1096.             });
    1097. 

  1097.             me.applyStyles(&quot;-moz-user-select: text; -khtml-user-select: text;&quot;);
    1098. 

  1098.             me.removeCls(Ext.baseCSSPrefix + 'unselectable');
    1099. 

  1099.             return me;
    1100. 

  1100.         },
    1101. 

  1101. 

  1102. <span id='Ext-Element-method-unselectable'>        /**
    1103. 

  1103. </span>         * Disables text selection for this element (normalized across browsers)
    1104. 

  1104.          * @return {Ext.Element} this
    1105. 

  1105.          */
    1106. 

  1106.         unselectable : function(){
    1107. 

  1107.             var me = this;
    1108. 

  1108.             me.dom.unselectable = &quot;on&quot;;
    1109. 

  1109. 

  1110.             me.swallowEvent(&quot;selectstart&quot;, true);
    1111. 

  1111.             me.applyStyles(&quot;-moz-user-select:-moz-none;-khtml-user-select:none;&quot;);
    1112. 

  1112.             me.addCls(Ext.baseCSSPrefix + 'unselectable');
    1113. 

  1113. 

  1114.             return me;
    1115. 

  1115.         },
    1116. 

  1116. 

  1117. <span id='Ext-Element-method-getMargin'>        /**
    1118. 

  1118. </span>         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
    1119. 

  1119.          * then it returns the calculated width of the sides (see getPadding)
    1120. 

  1120.          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
    1121. 

  1121.          * @return {Object/Number}
    1122. 

  1122.          */
    1123. 

  1123.         getMargin : function(side){
    1124. 

  1124.             var me = this,
    1125. 

  1125.                 hash = {t:&quot;top&quot;, l:&quot;left&quot;, r:&quot;right&quot;, b: &quot;bottom&quot;},
    1126. 

  1126.                 o = {},
    1127. 

  1127.                 key;
    1128. 

  1128. 

  1129.             if (!side) {
    1130. 

  1130.                 for (key in me.margins){
    1131. 

  1131.                     o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
    1132. 

  1132.                 }
    1133. 

  1133.                 return o;
    1134. 

  1134.             } else {
    1135. 

  1135.                 return me.addStyles.call(me, side, me.margins);
    1136. 

  1136.             }
    1137. 

  1137.         }
    1138. 

  1138.     });
    1139. 

  1139. })();</pre>
    1140. 

  1140. </body>
    1141. 

  1141. </html>
    1142.