docs/source/TextMetrics.html

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