docs/source/TextMetrics.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-util-TextMetrics'>/**
  19 </span> * @class Ext.util.TextMetrics
  20  * &lt;p&gt;
  21  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
  22  * wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and
  23  * should not contain any HTML, otherwise it may not be measured correctly.&lt;/p&gt;
  24  * &lt;p&gt;The measurement works by copying the relevant CSS styles that can affect the font related display,
  25  * then checking the size of an element that is auto-sized. Note that if the text is multi-lined, you must
  26  * provide a &lt;b&gt;fixed width&lt;/b&gt; when doing the measurement.&lt;/p&gt;
  27  *
  28  * &lt;p&gt;
  29  * If multiple measurements are being done on the same element, you create a new instance to initialize
  30  * to avoid the overhead of copying the styles to the element repeatedly.
  31  * &lt;/p&gt;
  32  */
  33 Ext.define('Ext.util.TextMetrics', {
  34     statics: {
  35         shared: null,
  36 <span id='Ext-util-TextMetrics-method-measure'>        /**
  37 </span>         * Measures the size of the specified text
  38          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
  39          * that can affect the size of the rendered text
  40          * @param {String} text The text to measure
  41          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
  42          * in order to accurately measure the text height
  43          * @return {Object} An object containing the text's size {width: (width), height: (height)}
  44          */
  45         measure: function(el, text, fixedWidth){
  46             var me = this,
  47                 shared = me.shared;
  48
  49             if(!shared){
  50                 shared = me.shared = new me(el, fixedWidth);
  51             }
  52             shared.bind(el);
  53             shared.setFixedWidth(fixedWidth || 'auto');
  54             return shared.getSize(text);
  55         },
  56
  57 <span id='Ext-util-TextMetrics-method-destroy'>        /**
  58 </span>          * Destroy the TextMetrics instance created by {@link #measure}.
  59           */
  60          destroy: function(){
  61              var me = this;
  62              Ext.destroy(me.shared);
  63              me.shared = null;
  64          }
  65     },
  66
  67 <span id='Ext-util-TextMetrics-method-constructor'>    /**
  68 </span>     * @constructor
  69      * @param {Mixed} bindTo The element to bind to.
  70      * @param {Number} fixedWidth A fixed width to apply to the measuring element.
  71      */
  72     constructor: function(bindTo, fixedWidth){
  73         var measure = this.measure = Ext.getBody().createChild({
  74             cls: 'x-textmetrics'
  75         });
  76         this.el = Ext.get(bindTo);
  77
  78         measure.position('absolute');
  79         measure.setLeftTop(-1000, -1000);
  80         measure.hide();
  81
  82         if (fixedWidth) {
  83            measure.setWidth(fixedWidth);
  84         }
  85     },
  86
  87 <span id='Ext-util-TextMetrics-method-getSize'>    /**
  88 </span>     * &lt;p&gt;&lt;b&gt;Only available on the instance returned from {@link #createInstance}, &lt;u&gt;not&lt;/u&gt; on the singleton.&lt;/b&gt;&lt;/p&gt;
  89      * Returns the size of the specified text based on the internal element's style and width properties
  90      * @param {String} text The text to measure
  91      * @return {Object} An object containing the text's size {width: (width), height: (height)}
  92      */
  93     getSize: function(text){
  94         var measure = this.measure,
  95             size;
  96
  97         measure.update(text);
  98         size = measure.getSize();
  99         measure.update('');
 100         return size;
 101     },
 102
 103 <span id='Ext-util-TextMetrics-method-bind'>    /**
 104 </span>     * Binds this TextMetrics instance to a new element
 105      * @param {Mixed} el The element
 106      */
 107     bind: function(el){
 108         var me = this;
 109
 110         me.el = Ext.get(el);
 111         me.measure.setStyle(
 112             me.el.getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
 113         );
 114     },
 115
 116 <span id='Ext-util-TextMetrics-method-setFixedWidth'>    /**
 117 </span>     * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
 118      * to set a fixed width in order to accurately measure the text height.
 119      * @param {Number} width The width to set on the element
 120      */
 121      setFixedWidth : function(width){
 122          this.measure.setWidth(width);
 123      },
 124
 125 <span id='Ext-util-TextMetrics-method-getWidth'>     /**
 126 </span>      * Returns the measured width of the specified text
 127       * @param {String} text The text to measure
 128       * @return {Number} width The width in pixels
 129       */
 130      getWidth : function(text){
 131          this.measure.dom.style.width = 'auto';
 132          return this.getSize(text).width;
 133      },
 134
 135 <span id='Ext-util-TextMetrics-method-getHeight'>     /**
 136 </span>      * Returns the measured height of the specified text
 137       * @param {String} text The text to measure
 138       * @return {Number} height The height in pixels
 139       */
 140      getHeight : function(text){
 141          return this.getSize(text).height;
 142      },
 143
 144 <span id='Ext-util-TextMetrics-method-destroy'>     /**
 145 </span>      * Destroy this instance
 146       */
 147      destroy: function(){
 148          var me = this;
 149          me.measure.remove();
 150          delete me.el;
 151          delete me.measure;
 152      }
 153 }, function(){
 154     Ext.core.Element.addMethods({
 155 <span id='Ext-core-Element-method-getTextWidth'>        /**
 156 </span>         * Returns the width in pixels of the passed text, or the width of the text in this Element.
 157          * @param {String} text The text to measure. Defaults to the innerHTML of the element.
 158          * @param {Number} min (Optional) The minumum value to return.
 159          * @param {Number} max (Optional) The maximum value to return.
 160          * @return {Number} The text width in pixels.
 161          * @member Ext.core.Element getTextWidth
 162          */
 163         getTextWidth : function(text, min, max){
 164             return Ext.Number.constrain(Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width, min || 0, max || 1000000);
 165         }
 166     });
 167 });
 168 </pre>
 169 </body>
 170 </html>