THE BLOG

News, tips and tricks from 2Gears

Sprintf formatter for Sencha Touch and ExtJS

Posted · Add Comment
HTML5 white grey 60px

After programming in multiple languages I have come to depend on sprintf quite a lot. Almost every language I know of provides a fairly decent version of the sprintf formatter. Unfortunately JavaScript is not one of them. For a lot of projects we use ExtJS and Sencha Touch. While both frameworks offer quite some string formatting functionalities using the String and Format classes, personally I feel sprintf gives me as a developer much more freedom to format strings the way I want them. Luckily it can be easily integrated in ExtJS and Sencha Touch.

In Sencha Touch and ExtJS we use string formatting separately, but also a lot in XTemplates (which are great for creating all sorts of templates). As an example I might want to use an XTemplate to create an invoice. The XTemplate would then consume an object containing the line items that are calculated by my controller and some summary information. A (stupid simple) example would be:

var template = new Ext.XTemplate(
 '<h1>Invoice number {invoicenumber}</h1>',
 '<h2>Items:</h2>',
 '<ol>',
 '<tpl for="lineitems">',
 '<li><strong>{name}</strong> - {price}</li>',
 '</tpl>',
 '</ol>',
 'Total: {total}<br>',
 'Tax: {tax}'
 );

My controller fetches the line items from a local store and calculates the total and tax using simple formulas. The prices in the resulting invoice object for the XTemplate to render are all floats or integers.

var invoice = {
 invoicenumber: 235,
 total: 125.5,
 tax: 23.85,
 lineitems: [{
 name: 'Some amazing product',
 price: 80
 },{
 name: 'Some less amazing product',
 price: 45.5
 }]
 };

I render the XTemplate using ‘template.apply(invoice);’ and….

<h1>Invoice number 235</h1>
 <h2>Items:</h2>
 <ol>
 <li><strong>Some amazing product</strong> - 80</li>
 <li><strong>Some less amazing product</strong> - 45.5</li>
 </ol>
 Total: 125.5<br>
 Tax: 23.85

Clearly not what I want. The prices have to be formatted with 2 decimals and the invoice number has to be 0-padded up to 6 chracters.
With the additions below, this becomes as easy as… well… sprintf.

var template = new Ext.XTemplate(
 '<h1>Invoice number {invoicenumber:printf("%06d")}</h1>',
 '<h2>Items:</h2>',
 '<ol>',
 '<tpl for="lineitems">',
 '<li><strong>{name}</strong> - {price:printf("€ %.2f")}</li>',
 '</tpl>',
 '</ol>',
 'Total: {total:printf("€ %.2f")}<br>',
 'Tax: {tax:printf("€ %.2f")}'
 );

And voila

<h1>Invoice number 000235</h1>
 <h2>Items:</h2>
 <ol>
 <li><strong>Some amazing product</strong> - € 80.00</li>
 <li><strong>Some less amazing product</strong> - € 45.50</li>
 </ol>
 Total: € 125.50<br>
 Tax: € 23.85

All you have to do is drop the code below into your app. It injects an sprintf function into the Ext.String class and a custom printf formatter to the Ext.util.Format class. The code can also be downloaded as a js file here. Almost all general use sprintf formats are supported. If you like the solution, let me know and consider sharing this post it with others. Good luck.

/**
sprintf() for JavaScript 0.7-beta1

http://www.diveintojavascript.com/projects/javascript-sprintf

Copyright (c) Alexandru Marasteanu
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of sprintf() for JavaScript nor the
names of its contributors may be used to endorse or promote products
derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL Alexandru Marasteanu BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Changelog:
2010.09.06 - 0.7-beta1
- features: vsprintf, support for named placeholders
- enhancements: format cache, reduced global namespace pollution

2010.05.22 - 0.6:
- reverted to 0.4 and fixed the bug regarding the sign of the number 0
Note:
Thanks to Raphael Pigulla (http://www.n3rd.org/)
who warned me about a bug in 0.5, I discovered that the last update was
a regress. I appologize for that.

2010.05.09 - 0.5:
- bug fix: 0 is now preceeded with a + sign
- bug fix: the sign was not at the right position on padded results (Kamal Abdali)
- switched from GPL to BSD license

2007.10.21 - 0.4:
- unit test and patch (David Baird)

2007.09.17 - 0.3:
- bug fix: no longer throws exception on empty paramenters (Hans Pufal)

2007.09.11 - 0.2:
- feature: added argument swapping

2007.04.03 - 0.1:
- initial release
**/

Ext.onReady(function() {
function get_type(variable) {
return Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();
}
function str_repeat(input, multiplier) {
for (var output = []; multiplier > 0; output[--multiplier] = input) {/* do nothing */}
return output.join('');
}

var str_format = function() {
if (!str_format.cache.hasOwnProperty(arguments[0])) {
str_format.cache[arguments[0]] = str_format.parse(arguments[0]);
}
return str_format.format.call(null, str_format.cache[arguments[0]], arguments);
};

str_format.format = function(parse_tree, argv) {
var cursor = 1, tree_length = parse_tree.length, node_type = '', arg, output = [], i, k, match, pad, pad_character, pad_length;
for (i = 0; i < tree_length; i++) {
node_type = get_type(parse_tree[i]);
if (node_type === 'string') {
output.push(parse_tree[i]);
}
else if (node_type === 'array') {
match = parse_tree[i]; // convenience purposes only
if (match[2]) { // keyword argument
arg = argv[cursor];
for (k = 0; k < match[2].length; k++) { if (!arg.hasOwnProperty(match[2][k])) { throw(Ext.String.sprintf('[sprintf] property "%s" does not exist', match[2][k])); } arg = arg[match[2][k]]; } } else if (match[1]) { // positional argument (explicit) arg = argv[match[1]]; } else { // positional argument (implicit) arg = argv[cursor++]; } if (/[^s]/.test(match[8]) && (get_type(arg) != 'number')) { throw(Ext.String.sprintf('[sprintf] expecting number but found %s', get_type(arg))); } switch (match[8]) { case 'b': arg = arg.toString(2); break; case 'c': arg = String.fromCharCode(arg); break; case 'd': arg = parseInt(arg, 10); break; case 'e': arg = match[7] ? arg.toExponential(match[7]) : arg.toExponential(); break; case 'f': arg = match[7] ? parseFloat(arg).toFixed(match[7]) : parseFloat(arg); break; case 'o': arg = arg.toString(8); break; case 's': arg = ((arg = String(arg)) && match[7] ? arg.substring(0, match[7]) : arg); break; case 'u': arg = Math.abs(arg); break; case 'x': arg = arg.toString(16); break; case 'X': arg = arg.toString(16).toUpperCase(); break; } arg = (/[def]/.test(match[8]) && match[3] && arg >= 0 ? '+'+ arg : arg);
pad_character = match[4] ? match[4] == '0' ? '0' : match[4].charAt(1) : ' ';
pad_length = match[6] - String(arg).length;
pad = match[6] ? str_repeat(pad_character, pad_length) : '';
output.push(match[5] ? arg + pad : pad + arg);
}
}
return output.join('');
};

str_format.cache = {};

str_format.parse = function(fmt) {
var _fmt = fmt, match = [], parse_tree = [], arg_names = 0;
while (_fmt) {
if ((match = /^[^x25]+/.exec(_fmt)) !== null) {
parse_tree.push(match[0]);
}
else if ((match = /^x25{2}/.exec(_fmt)) !== null) {
parse_tree.push('%');
}
else if ((match = /^x25(?:([1-9]d*)$|(([^)]+)))?(+)?(0|'[^$])?(-)?(d+)?(?:.(d+))?([b-fosuxX])/.exec(_fmt)) !== null) {
if (match[2]) {
arg_names |= 1;
var field_list = [], replacement_field = match[2], field_match = [];
if ((field_match = /^([a-z_][a-z_d]*)/i.exec(replacement_field)) !== null) {
field_list.push(field_match[1]);
while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
if ((field_match = /^.([a-z_][a-z_d]*)/i.exec(replacement_field)) !== null) {
field_list.push(field_match[1]);
}
else if ((field_match = /^[(d+)]/.exec(replacement_field)) !== null) {
field_list.push(field_match[1]);
}
else {
throw('[sprintf] huh?');
}
}
}
else {
throw('[sprintf] huh?');
}
match[2] = field_list;
}
else {
arg_names |= 2;
}
if (arg_names === 3) {
throw('[sprintf] mixing positional and named placeholders is not (yet) supported');
}
parse_tree.push(match);
}
else {
throw('[sprintf] huh?');
}
_fmt = _fmt.substring(match[0].length);
}
return parse_tree;
};

Ext.String.sprintf = str_format;

Ext.apply(Ext.util.Format, {
printf: function(v, format) {
if (typeof v != "number") {
Ext.Logger.warn('value in printf format is not numeric, trying to cast to float');
v = parseFloat(v,10);
}
return Ext.String.sprintf(format, v);
}
});
});

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 5 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>