View Full Version : Reliable way of appending ellipse to string in grid?

28 Jun 2010, 6:47 PM
If the text contained within a cell in a grid extends beyond that cell's width, is there any way to have an ellipse appended to the end, where the string gets cut off by the cell? Without this, the grid looks really cheap when the text just run into the cell and disappears. The ellipse would give it a much more polished look and feel.

28 Jun 2010, 8:04 PM
{id: 'yourColumn', header: 'Your Column', renderer: function(val) { return Ext.util.Format.ellipsis(val, 20); }}

28 Jun 2010, 8:09 PM
But the "20" specifies a length, not a width, correct? This won't work because I need it to be based on width, not length of text since the width will vary depending on which letters are in the text as each letter has a different width. Is there a way to get the width a of a certain string of text, and then use that? Otherwise, it seems to me this ellipsis format command is worthless as it will not look consistent between different text.

28 Jun 2010, 8:25 PM
You can use the Ext.util.TextMetrics class to find the width of blocks of text.


28 Jun 2010, 9:51 PM
Just add these styles to the rule for x-grid3-inner

text-overflow: ellipsis;
-o-text-overflow: ellipsis;

28 Jun 2010, 9:53 PM
Needs some code for FF.


Maybe port that jQuery method to Ext?

29 Jun 2010, 9:32 AM
Thanks Animal! Looks promising. I'll give it a shot later and let you know how it works.