View Full Version : TextMetrics not working

16 Sep 2009, 1:19 PM
When I try to use:

var len = Ext.util.TextMetrics.getWidth("test");

FireBug says:

Ext.util.TextMetrics.getWidth is not a function.

It definitely should be according to the API docs. What am I doing wrong?

16 Sep 2009, 9:29 PM

var len = Ext.util.TextMetrics.messure(Ext.getBody(), 'test').width

For getWidth you have to create a separate instance of TextMetrics on an Element or dom node via Ext.util.TextMetrics.createInstance(el). messure uses a shared instance.
For Ext.getBody() specify what ever element you want to use the styles from, which can take affect to the size of the text (font-size, font-weight and so on).

Hope, that you understand it. I agree with you, it isn't clear from the docs.

16 Sep 2009, 11:27 PM
I've added some extra explanation to the docs which will be visible when the docs are next generated and released.

16 Sep 2009, 11:43 PM
Thanks Animal, I appreciate your help!

17 Sep 2009, 8:01 AM
Thanks, that worked. Now, I'm trying to use this in conjunction with appending an ellipse at the end of the string if it will exceed a certain width. But, the Ext.util.Format.ellipse() takes a length argument, not a width argument. So how can I use these function to determine if a string is longer than a certain width in pixels to instead append an ellipse at the appropriate location?

17 Sep 2009, 9:22 PM
I was facing this problem, too, and didn't find a simple solution.
For me, the only possibility is to try it out. That means calculating the width of the text letter by letter in a loop. But that must be more than slow and ineffective (I didn't try it), even if you start calculating at a letter which usually must be pretty near the right border.
So I solve this otherwise:
My elements have always the same width. So i put some long text in it (with some wide letters such as "w" or "m") and counted the letters till the right border. It is better to round the number down a bit. It's not a 100% sureness that the text will fit the line and the element mostly isn't filled completely till the right border, but for me it is a suitable solution.

Please let me know, if you have a better solution for this problem.