Thursday, May 22, 2008

Rails helpers in Ext JS

Today I needed to truncate a set of strings in Ext JS. Rails has the truncate helper method built in, Ext JS not, which isn't bad since it's pretty easy to write your own little helper in Ext JS.
Update: Diego pointed out that there is actually a truncate method in Ext JS, called ellipsis which can be found in the Ext.util.Format class. I hope this post still makes a little sense, since it's about writing your own helpers in Javascript/Ext JS.

Here's the Ruby code from the Rails core:

def truncate(text, length = 30, truncate_string = "...")
if text.nil? then return end
l = length - truncate_string.chars.length
(text.chars.length > length ? text.chars[0...l] + truncate_string : text).to_s

Here's my little Javascript helper:

Ext.apply(String.prototype, {

truncate_length: 30,

truncate_string: "...",

truncate : function(truncate_length, truncate_string) {
truncate_length = truncate_length || this.truncate_length;
truncate_string = truncate_string || this.truncate_string;
var length = truncate_length - truncate_string.length;
return this.length > truncate_length ? this.substr(0, length) + truncate_string : String(this);


It has the same behavior as the Rails helper. Note that you don't really have to use Ext.apply(), but it helps you to DRY your code, since you can pass an object with multiple methods and attributes to the prototype attribute, instead of writing String.prototype = function() { .. } for each attribute/method you want to add/overwrite.

Creating an extra attribute for truncate_length and truncate_string allows you to easily define your default values for your app. So if you like to append only two dots by default, just add String.prototype.truncate_string = '..' to your code.

While writing this post I actually remember that Prototype JS has the truncate and many other helper methods already built in. But well, writing your own helpers (with the help of Ext JS) can be fun, too. X-D

Here is the Prototype code, just for the sake of comparison:

truncate: function(length, truncation) {
length = length || 30;
truncation = truncation === undefined ? '...' : truncation;
return this.length > length ?
this.slice(0, length - truncation.length) + truncation : String(this);


Diego said...

what about Ext.format.ellipsis(String value, Number length) ??

Steffen Hiller said...

Aehm, ellipsis would work, too :-)
I was naively looking for a "truncate" method in the "String" class.
Thanks for pointing it out! I'll update the post...

Diego said...

same happened to me xD

by the way..i am thinking on using your extjs extension for printing grids.. but I kind of have a complex scenario.. would be great if you have some time to check it out..

when you reply to my comment, i'll send my contact info :D


Steffen Hiller said...

Sure, let me know of your scenario. Either email me at s dot hiller at caprireleases dot com or if you don't mind I would prefer you post it at the extension's thread, so everybody can contribute or learn. :-)
Speaking of the forum, I got to answer some other questions, too :-x