Format your numbers!
August 13, 2015
3 min read
Yesterday, I posted about a gripe on not pluralizing text based on the value that text was associated to. Today, I visited a site and noticed some of their numbers were not formatted (some were). Once again, I was surprised how much this annoyed me…
You can see the ‘1000000’ is not formatted, in fact I had to count a couple times to make sure I had enough zeros because my eyes were playing tricks on me when trying to count the number on the site. That’s why you format the numbers! So your users don’t have to struggle!
Once again, Ext JS to the rescue!
Ext.util.Format has a
number method that will take a value and a format string. The format string has quite a lot of options and luckily is pretty well documented. Let’s look at a simple example that will format that text correctly (least for my locale):
As you can see, it outputs ‘1,000,000’ and I can easily see what the actual value. Before formatting, it could have easily been 10,000,000 or 100,000 but now I know for sure it’s 1,000,000. Let’s look at usage in an
Ext JS making it simple! Let’s look at doing this in a grid, there’s three ways to do it. Here’s a grid with three columns that’s doing it the three different ways:
The first column has a renderer that uses
Ext.util.Format.number directly, nothing really wrong with this but we can simplify this version by using
Ext.util.Format.numberRenderer as in the second column. What the
numberRenderer method does is basically returns a function and within this function uses
Ext.util.Format.number just like in the first column. In fact, it’s exactly the same thing, just a shorthand version. Those two are more for manual usage and backwards compatibility. The third column, for a grid, is the preferred way using
Ext.grid.column.Number with a simple format config. Just like before,
Ext.grid.column.Number just defines the
renderer config for you and uses
Ext.util.Format.number method just like in the first column.
When should you use one over the other.
Ext.grid.column.Number was introduced in Ext JS 4.0 so if you are using Ext JS 3 or older, of course you cannot use it then, maybe you should update! :) The benefit of using
Ext.grid.column.Number is it sets up the
updater method on the column which means potential faster grid cell updates. I still use the other two when I need to use a different column but still need to format the number. For example,
Ext.tree.Panel is actually just a grid but with a special column to show the expand and node icons. That means you have to use
Ext.tree.Column and cannot use the
Ext.grid.column.Number so you have to use one of the manual ways, like this:
Here, we have to use the
treecolumn so we can expand/collapse the Items node so we have to define the renderer. Since some
text values may not be a number and therefore do not want to format them, I use a quick ternary to check if it’s a number then format it, otherwise return it.
Written by Mitchell Simoens who is a long time nerd developing software and building computers and gadgets. Anything expressed on this website are Mitchell Simoens's alone and do not represent his employer.