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