docs/source/TextMetrics.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"><div id="cls-Ext.util.TextMetrics"></div>/**
   9  * @class Ext.util.TextMetrics
  10  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
  11  * wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and
  12  * should not contain any HTML, otherwise it may not be measured correctly.
  13  * @singleton
  14  */
  15 Ext.util.TextMetrics = function(){
  16     var shared;
  17     return {
  18         <div id="method-Ext.util.TextMetrics-measure"></div>/**
  19          * Measures the size of the specified text
  20          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
  21          * that can affect the size of the rendered text
  22          * @param {String} text The text to measure
  23          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
  24          * in order to accurately measure the text height
  25          * @return {Object} An object containing the text's size {width: (width), height: (height)}
  26          */
  27         measure : function(el, text, fixedWidth){
  28             if(!shared){
  29                 shared = Ext.util.TextMetrics.Instance(el, fixedWidth);
  30             }
  31             shared.bind(el);
  32             shared.setFixedWidth(fixedWidth || 'auto');
  33             return shared.getSize(text);
  34         },
  35
  36         <div id="method-Ext.util.TextMetrics-createInstance"></div>/**
  37          * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
  38          * the overhead of multiple calls to initialize the style properties on each measurement.
  39          * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
  40          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
  41          * in order to accurately measure the text height
  42          * @return {Ext.util.TextMetrics.Instance} instance The new instance
  43          */
  44         createInstance : function(el, fixedWidth){
  45             return Ext.util.TextMetrics.Instance(el, fixedWidth);
  46         }
  47     };
  48 }();
  49
  50 Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){
  51     var ml = new Ext.Element(document.createElement('div'));
  52     document.body.appendChild(ml.dom);
  53     ml.position('absolute');
  54     ml.setLeftTop(-1000, -1000);
  55     ml.hide();
  56
  57     if(fixedWidth){
  58         ml.setWidth(fixedWidth);
  59     }
  60
  61     var instance = {
  62         <div id="method-Ext.util.TextMetrics-getSize"></div>/**
  63          * Returns the size of the specified text based on the internal element's style and width properties
  64          * @param {String} text The text to measure
  65          * @return {Object} An object containing the text's size {width: (width), height: (height)}
  66          */
  67         getSize : function(text){
  68             ml.update(text);
  69             var s = ml.getSize();
  70             ml.update('');
  71             return s;
  72         },
  73
  74         <div id="method-Ext.util.TextMetrics-bind"></div>/**
  75          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
  76          * that can affect the size of the rendered text
  77          * @param {String/HTMLElement} el The element, dom node or id
  78          */
  79         bind : function(el){
  80             ml.setStyle(
  81                 Ext.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
  82             );
  83         },
  84
  85         <div id="method-Ext.util.TextMetrics-setFixedWidth"></div>/**
  86          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
  87          * to set a fixed width in order to accurately measure the text height.
  88          * @param {Number} width The width to set on the element
  89          */
  90         setFixedWidth : function(width){
  91             ml.setWidth(width);
  92         },
  93
  94         <div id="method-Ext.util.TextMetrics-getWidth"></div>/**
  95          * Returns the measured width of the specified text
  96          * @param {String} text The text to measure
  97          * @return {Number} width The width in pixels
  98          */
  99         getWidth : function(text){
 100             ml.dom.style.width = 'auto';
 101             return this.getSize(text).width;
 102         },
 103
 104         <div id="method-Ext.util.TextMetrics-getHeight"></div>/**
 105          * Returns the measured height of the specified text.  For multiline text, be sure to call
 106          * {@link #setFixedWidth} if necessary.
 107          * @param {String} text The text to measure
 108          * @return {Number} height The height in pixels
 109          */
 110         getHeight : function(text){
 111             return this.getSize(text).height;
 112         }
 113     };
 114
 115     instance.bind(bindTo);
 116
 117     return instance;
 118 };
 119
 120 Ext.Element.addMethods({
 121     <div id="method-Ext.Element-getTextWidth"></div>/**
 122      * Returns the width in pixels of the passed text, or the width of the text in this Element.
 123      * @param {String} text The text to measure. Defaults to the innerHTML of the element.
 124      * @param {Number} min (Optional) The minumum value to return.
 125      * @param {Number} max (Optional) The maximum value to return.
 126      * @return {Number} The text width in pixels.
 127      * @member Ext.Element getTextWidth
 128      */
 129     getTextWidth : function(text, min, max){
 130         return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000);
 131     }
 132 });
 133 </pre>    \r
 134 </body>\r
 135 </html>