View Full Version : TextMetrics is not giving proper width

5 Feb 2010, 5:16 AM
I have a textArea which can take upto 4000 characters
Now when I am entering a text upto of size 405 characters then using TextMetrics I am able to retrieve the width the text. But beyond 405 characters the textWidth I get is always the same.

The code is as mentioned below
var txtMetrics = Ext.util.TextMetrics.createInstance(this.el);
var strValue = this.getValue();
var textWidth = txtMetrics.getWidth(strValue);

I wanted to know if i am doing anything wrong. Kindly let me know how i can the width of the text for a longer size of upto 5000 characters.

Thanks in advance

5 Feb 2010, 10:50 AM
What is this.el?

The element that you bind your TextMetrics class to must have the same CSS classes and rules applied to it so that the text width returns the correct value.

7 Feb 2010, 7:14 PM
Thanks for the reply.
Thanks for the immediate response.

I am extending the textArea to create a custom component. The extended class has this method.

Ext.ag.ASTextArea = Ext.extend(Ext.form.TextArea, {
getTextWidth : function() {
var strValue = this.getValue();
var txtMetrics = Ext.util.TextMetrics.createInstance(this.el);
var textWidth = txtMetrics.getWidth(strValue);
return textWidth;

So I believe the same css will be applied. Let me know if i have to make any changes.

7 Feb 2010, 7:33 PM

I just tried with the below mentioned code for testing purpose.
Ext.util.TextMetrics.measure(Ext.getBody(), strValue).width

Upto some 460 character it gave me the proper width. Beyond this point it kept on giving me the same width (2280) irrespective of increase in the length of string.

So I believe it is still not the css it matters.