docs/source/Element.style-more.html

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