docs/source/Element.style-more.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js">/**\r
  10  * @class Ext.Element\r
  11  */\r
  12 \r
  13 // special markup used throughout Ext when box wrapping elements\r
  14 Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
  15 \r
  16 Ext.Element.addMethods(function(){\r
  17     var INTERNAL = "_internal",\r
  18         pxMatch = /(\d+)px/;\r
  19     return {\r
  20         <div id="method-Ext.Element-applyStyles"></div>/**\r
  21          * More flexible version of {@link #setStyle} for setting style properties.\r
  22          * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
  23          * a function which returns such a specification.\r
  24          * @return {Ext.Element} this\r
  25          */\r
  26         applyStyles : function(style){\r
  27             Ext.DomHelper.applyStyles(this.dom, style);\r
  28             return this;\r
  29         },\r
  30 \r
  31         <div id="method-Ext.Element-getStyles"></div>/**\r
  32          * Returns an object with properties matching the styles requested.\r
  33          * For example, el.getStyles('color', 'font-size', 'width') might return\r
  34          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
  35          * @param {String} style1 A style name\r
  36          * @param {String} style2 A style name\r
  37          * @param {String} etc.\r
  38          * @return {Object} The style object\r
  39          */\r
  40         getStyles : function(){\r
  41             var ret = {};\r
  42             Ext.each(arguments, function(v) {\r
  43                ret[v] = this.getStyle(v);\r
  44             },\r
  45             this);\r
  46             return ret;\r
  47         },\r
  48 \r
  49         // deprecated\r
  50         getStyleSize : function(){\r
  51             var me = this,\r
  52                 w,\r
  53                 h,\r
  54                 d = this.dom,\r
  55                 s = d.style;\r
  56             if(s.width && s.width != 'auto'){\r
  57                 w = parseInt(s.width, 10);\r
  58                 if(me.isBorderBox()){\r
  59                    w -= me.getFrameWidth('lr');\r
  60                 }\r
  61             }\r
  62             if(s.height && s.height != 'auto'){\r
  63                 h = parseInt(s.height, 10);\r
  64                 if(me.isBorderBox()){\r
  65                    h -= me.getFrameWidth('tb');\r
  66                 }\r
  67             }\r
  68             return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
  69         },\r
  70 \r
  71         // private  ==> used by ext full\r
  72         setOverflow : function(v){\r
  73             var dom = this.dom;\r
  74             if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
  75                 dom.style.overflow = 'hidden';\r
  76                 (function(){dom.style.overflow = 'auto';}).defer(1);\r
  77             }else{\r
  78                 dom.style.overflow = v;\r
  79             }\r
  80         },\r
  81 \r
  82        <div id="method-Ext.Element-boxWrap"></div>/**\r
  83         * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
  84         * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
  85         * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},\r
  86         * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}).  The markup\r
  87         * is of this form:</p>\r
  88         * <pre><code>\r
  89     Ext.Element.boxMarkup =\r
  90     &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>\r
  91      &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>\r
  92      &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;\r
  93         * </code></pre>\r
  94         * <p>Example usage:</p>\r
  95         * <pre><code>\r
  96     // Basic box wrap\r
  97     Ext.get("foo").boxWrap();\r
  98 \r
  99     // You can also add a custom class and use CSS inheritance rules to customize the box look.\r
 100     // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
 101     // for how to create a custom box wrap style.\r
 102     Ext.get("foo").boxWrap().addClass("x-box-blue");\r
 103         * </code></pre>\r
 104         * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
 105         * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
 106         * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
 107         * also supply all of the necessary rules.\r
 108         * @return {Ext.Element} The outermost wrapping element of the created box structure.\r
 109         */\r
 110         boxWrap : function(cls){\r
 111             cls = cls || 'x-box';\r
 112             var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>"));        //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));\r
 113             Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
 114             return el;\r
 115         },\r
 116 \r
 117         <div id="method-Ext.Element-setSize"></div>/**\r
 118          * Set the size of this Element. If animation is true, both width and height will be animated concurrently.\r
 119          * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>\r
 120          * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
 121          * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.\r
 122          * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>\r
 123          * </ul></div>\r
 124          * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>\r
 125          * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
 126          * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>\r
 127          * </ul></div>\r
 128          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
 129          * @return {Ext.Element} this\r
 130          */\r
 131         setSize : function(width, height, animate){\r
 132             var me = this;\r
 133             if(Ext.isObject(width)){ // in case of object from getSize()\r
 134                 height = width.height;\r
 135                 width = width.width;\r
 136             }\r
 137             width = me.adjustWidth(width);\r
 138             height = me.adjustHeight(height);\r
 139             if(!animate || !me.anim){\r
 140                 me.dom.style.width = me.addUnits(width);\r
 141                 me.dom.style.height = me.addUnits(height);\r
 142             }else{\r
 143                 me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
 144             }\r
 145             return me;\r
 146         },\r
 147 \r
 148         <div id="method-Ext.Element-getComputedHeight"></div>/**\r
 149          * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
 150          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
 151          * if a height has not been set using CSS.\r
 152          * @return {Number}\r
 153          */\r
 154         getComputedHeight : function(){\r
 155             var me = this,\r
 156                 h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
 157             if(!h){\r
 158                 h = parseInt(me.getStyle('height'), 10) || 0;\r
 159                 if(!me.isBorderBox()){\r
 160                     h += me.getFrameWidth('tb');\r
 161                 }\r
 162             }\r
 163             return h;\r
 164         },\r
 165 \r
 166         <div id="method-Ext.Element-getComputedWidth"></div>/**\r
 167          * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
 168          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
 169          * if a width has not been set using CSS.\r
 170          * @return {Number}\r
 171          */\r
 172         getComputedWidth : function(){\r
 173             var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
 174             if(!w){\r
 175                 w = parseInt(this.getStyle('width'), 10) || 0;\r
 176                 if(!this.isBorderBox()){\r
 177                     w += this.getFrameWidth('lr');\r
 178                 }\r
 179             }\r
 180             return w;\r
 181         },\r
 182 \r
 183         <div id="method-Ext.Element-getFrameWidth"></div>/**\r
 184          * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
 185          for more information about the sides.\r
 186          * @param {String} sides\r
 187          * @return {Number}\r
 188          */\r
 189         getFrameWidth : function(sides, onlyContentBox){\r
 190             return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
 191         },\r
 192 \r
 193         <div id="method-Ext.Element-addClassOnOver"></div>/**\r
 194          * Sets up event handlers to add and remove a css class when the mouse is over this element\r
 195          * @param {String} className\r
 196          * @return {Ext.Element} this\r
 197          */\r
 198         addClassOnOver : function(className){\r
 199             this.hover(\r
 200                 function(){\r
 201                     Ext.fly(this, INTERNAL).addClass(className);\r
 202                 },\r
 203                 function(){\r
 204                     Ext.fly(this, INTERNAL).removeClass(className);\r
 205                 }\r
 206             );\r
 207             return this;\r
 208         },\r
 209 \r
 210         <div id="method-Ext.Element-addClassOnFocus"></div>/**\r
 211          * Sets up event handlers to add and remove a css class when this element has the focus\r
 212          * @param {String} className\r
 213          * @return {Ext.Element} this\r
 214          */\r
 215         addClassOnFocus : function(className){\r
 216             this.on("focus", function(){\r
 217                 Ext.fly(this, INTERNAL).addClass(className);\r
 218             }, this.dom);\r
 219             this.on("blur", function(){\r
 220                 Ext.fly(this, INTERNAL).removeClass(className);\r
 221             }, this.dom);\r
 222             return this;\r
 223         },\r
 224 \r
 225         <div id="method-Ext.Element-addClassOnClick"></div>/**\r
 226          * 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)\r
 227          * @param {String} className\r
 228          * @return {Ext.Element} this\r
 229          */\r
 230         addClassOnClick : function(className){\r
 231             var dom = this.dom;\r
 232             this.on("mousedown", function(){\r
 233                 Ext.fly(dom, INTERNAL).addClass(className);\r
 234                 var d = Ext.getDoc(),\r
 235                     fn = function(){\r
 236                         Ext.fly(dom, INTERNAL).removeClass(className);\r
 237                         d.removeListener("mouseup", fn);\r
 238                     };\r
 239                 d.on("mouseup", fn);\r
 240             });\r
 241             return this;\r
 242         },\r
 243 \r
 244         <div id="method-Ext.Element-getViewSize"></div>/**\r
 245          * <p>Returns the dimensions of the element available to lay content out in.<p>\r
 246          * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>\r
 247          * example:<pre><code>\r
 248         var vpSize = Ext.getBody().getViewSize();\r
 249 \r
 250         // all Windows created afterwards will have a default value of 90% height and 95% width\r
 251         Ext.Window.override({\r
 252             width: vpSize.width * 0.9,\r
 253             height: vpSize.height * 0.95\r
 254         });\r
 255         // To handle window resizing you would have to hook onto onWindowResize.\r
 256         </code></pre>\r
 257          * @param {Boolean} contentBox True to return the W3 content box <i>within</i> the padding area of the element. False\r
 258          * or omitted to return the full area of the element within the border. See <a href="http://www.w3.org/TR/CSS2/box.html">http://www.w3.org/TR/CSS2/box.html</a>\r
 259          * @return {Object} An object containing the elements's area: <code>{width: &lt;element width>, height: &lt;element height>}</code>\r
 260          */\r
 261         getViewSize : function(contentBox){\r
 262             var doc = document,\r
 263                 me = this,\r
 264                 d = me.dom,\r
 265                 extdom = Ext.lib.Dom,\r
 266                 isDoc = (d == doc || d == doc.body),\r
 267                 isBB, w, h, tbBorder = 0, lrBorder = 0,\r
 268                 tbPadding = 0, lrPadding = 0;\r
 269             if (isDoc) {\r
 270                 return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };\r
 271             }\r
 272             isBB = me.isBorderBox();\r
 273             tbBorder = me.getBorderWidth('tb');\r
 274             lrBorder = me.getBorderWidth('lr');\r
 275             tbPadding = me.getPadding('tb');\r
 276             lrPadding = me.getPadding('lr');\r
 277 \r
 278             // Width calcs\r
 279             // Try the style first, then clientWidth, then offsetWidth\r
 280             if (w = me.getStyle('width').match(pxMatch)){\r
 281                 if ((w = parseInt(w[1], 10)) && isBB){\r
 282                     // Style includes the padding and border if isBB\r
 283                     w -= (lrBorder + lrPadding);\r
 284                 }\r
 285                 if (!contentBox){\r
 286                     w += lrPadding;\r
 287                 }\r
 288             } else {\r
 289                 if (!(w = d.clientWidth) && (w = d.offsetWidth)){\r
 290                     w -= lrBorder;\r
 291                 }\r
 292                 if (w && contentBox){\r
 293                     w -= lrPadding;\r
 294                 }\r
 295             }\r
 296 \r
 297             // Height calcs\r
 298             // Try the style first, then clientHeight, then offsetHeight\r
 299             if (h = me.getStyle('height').match(pxMatch)){\r
 300                 if ((h = parseInt(h[1], 10)) && isBB){\r
 301                     // Style includes the padding and border if isBB\r
 302                     h -= (tbBorder + tbPadding);\r
 303                 }\r
 304                 if (!contentBox){\r
 305                     h += tbPadding;\r
 306                 }\r
 307             } else {\r
 308                 if (!(h = d.clientHeight) && (h = d.offsetHeight)){\r
 309                     h -= tbBorder;\r
 310                 }\r
 311                 if (h && contentBox){\r
 312                     h -= tbPadding;\r
 313                 }\r
 314             }\r
 315 \r
 316             return {\r
 317                 width : w,\r
 318                 height : h\r
 319             };\r
 320         },\r
 321 \r
 322         <div id="method-Ext.Element-getSize"></div>/**\r
 323          * Returns the size of the element.\r
 324          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
 325          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
 326          */\r
 327         getSize : function(contentSize){\r
 328             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
 329         },\r
 330 \r
 331         <div id="method-Ext.Element-repaint"></div>/**\r
 332          * Forces the browser to repaint this element\r
 333          * @return {Ext.Element} this\r
 334          */\r
 335         repaint : function(){\r
 336             var dom = this.dom;\r
 337             this.addClass("x-repaint");\r
 338             setTimeout(function(){\r
 339                 Ext.fly(dom).removeClass("x-repaint");\r
 340             }, 1);\r
 341             return this;\r
 342         },\r
 343 \r
 344         <div id="method-Ext.Element-unselectable"></div>/**\r
 345          * Disables text selection for this element (normalized across browsers)\r
 346          * @return {Ext.Element} this\r
 347          */\r
 348         unselectable : function(){\r
 349             this.dom.unselectable = "on";\r
 350             return this.swallowEvent("selectstart", true).\r
 351                         applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
 352                         addClass("x-unselectable");\r
 353         },\r
 354 \r
 355         <div id="method-Ext.Element-getMargins"></div>/**\r
 356          * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
 357          * then it returns the calculated width of the sides (see getPadding)\r
 358          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
 359          * @return {Object/Number}\r
 360          */\r
 361         getMargins : function(side){\r
 362             var me = this,\r
 363                 key,\r
 364                 hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
 365                 o = {};\r
 366 \r
 367             if (!side) {\r
 368                 for (key in me.margins){\r
 369                     o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;\r
 370                 }\r
 371                 return o;\r
 372             } else {\r
 373                 return me.addStyles.call(me, side, me.margins);\r
 374             }\r
 375         }\r
 376     };\r
 377 }());\r
 378 </pre>    \r
 379 </body>\r
 380 </html>