Sencha Documentation

Provides precise pixel measurements for blocks of text so that you can determine exactly how high and wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and should not contain any HTML, otherwise it may not be measured correctly.

The measurement works by copying the relevant CSS styles that can affect the font related display, then checking the size of an element that is auto-sized. Note that if the text is multi-lined, you must provide a fixed width when doing the measurement.

If multiple measurements are being done on the same element, you create a new instance to initialize to avoid the overhead of copying the styles to the element repeatedly.

Methods

 
bind( Mixed el ) : Void
Binds this TextMetrics instance to a new element
Binds this TextMetrics instance to a new element

Parameters

  • el : Mixed
    The element

Returns

  • Void
 
constructor( Mixed bindTo, Number fixedWidth ) : Void

Parameters

  • bindTo : Mixed
    The element to bind to.
  • fixedWidth : Number
    A fixed width to apply to the measuring element.

Returns

  • Void
 
destroy : Void
Destroy this instance
Destroy this instance
 
getHeight( String text ) : Number
Returns the measured height of the specified text
Returns the measured height of the specified text

Parameters

  • text : String
    The text to measure

Returns

  • Number   height The height in pixels
 
getSize( String text ) : Object
Only available on the instance returned from createInstance, not on the singleton. Returns the size of the specified ...

Only available on the instance returned from createInstance, not on the singleton.

Returns the size of the specified text based on the internal element's style and width properties

Parameters

  • text : String
    The text to measure

Returns

  • Object   An object containing the text's size {width: (width), height: (height)}
 
getWidth( String text ) : Number
Returns the measured width of the specified text
Returns the measured width of the specified text

Parameters

  • text : String
    The text to measure

Returns

  • Number   width The width in pixels
 
measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object
Measures the size of the specified text
Measures the size of the specified text

Parameters

  • el : String/HTMLElement
    The element, dom node or id from which to copy existing CSS styles that can affect the size of the rendered text
  • text : String
    The text to measure
  • fixedWidth : Number
    (optional) If the text will be multiline, you have to set a fixed width in order to accurately measure the text height

Returns

  • Object   An object containing the text's size {width: (width), height: (height)}
 
setFixedWidth( Number width ) : Void
Sets a fixed width on the internal measurement element. If the text will be multiline, you have to set a fixed width...
Sets a fixed width on the internal measurement element. If the text will be multiline, you have to set a fixed width in order to accurately measure the text height.

Parameters

  • width : Number
    The width to set on the element

Returns

  • Void