docs/source/Element.style-more.html

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