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