-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Ext JS 3.0 Cookbook
String manipulation has always been a challenging area in JavaScript. Here, you will learn how to escape special characters, trim, pad, format, truncate, and change the case of your strings with the help of the utilities of Ext JS.
You can manipulate strings as shown in the following steps:
1. Create your sample values as shown here:
var needsEscape = "ExtJS's String Class will escape this"; var needsTrimming = " Needs trimming "; var cls = 'color-class' var color = 'Blue'; var sort = 'ASC'; var sample = "some text"; var longText = "This text should be truncated, it's really long."; var withScript = 'Some text<script type="text/javascript">var color = "Blue";<\/script>'; var longText = "Only a part of this text is needed."; var multiLineText = "One line\nAnother line\nYet another line"; var money = 29.99; var sample1 = '22'; var sample2 = '550'; var sample3 = '1500';
2. Now, let's use the string manipulation functions:
var escaped = String.escape(needsEscape);
document.write(escaped + '<br/>');
// The escaped string is "ExtJS\'s String Class will escape this".
var trimmed = needsTrimming.trim();
document.write(trimmed + '<br/>');
// the trimmed string is "Needs trimming"
var formatted = String.format('<span class="{0}">{1}</span>', cls, color);
document.write(formatted + '<br/>');
// formatted is '<div class="color-class">Color</div>'
sort = sort.toggle('ASC', 'DESC');
document.write(sort + '<br/>');
// instead of conditional logic:
//sort = (sort == 'ASC' ? 'DESC' : 'ASC');
var converted = Ext.util.Format.uppercase(sample);
document.write(converted + '<br/>');
// converted is now "SOME TEXT".
sample = "SOME TEXT";
converted = Ext.util.Format.lowercase(sample);
// converted is now "some text".
document.write(converted + '<br/>');
sample = "some text";
converted = Ext.util.Format.capitalize(sample);
document.write(converted + '<br/>');
// converted is now "Some text".
var truncated = Ext.util.Format.ellipsis(longText, 20);
document.write(truncated + '<br/>');
// truncated is "This text should ...".
// Removing script tags
var noScript = Ext.util.Format.stripScripts(withScript);
document.write(noScript + '<br/>');
// noScript is "Some text".
// Returning a portion of a string
var subString = Ext.util.Format.substr(longText, 0, 11);
document.write(subString + '<br/>');
// subString is "Only a part".
// Converting newline characters to the html tag <br/>
var html = Ext.util.Format.nl2br(multiLineText);
document.write(html + '<br/>');
// html is
// One line
// Another line
// Yet another line
var usCurrency = Ext.util.Format.usMoney(money);
document.write(usCurrency + '<br/>');
// usCurrency is $29.99
// Normalizing strings
var normalized1 = String.leftPad(sample1, 4, '0');
// normalized1 is '0022'
var normalized2 = String.leftPad(sample2, 4, '0');
// normalized3 is '0550';
var normalized3 = String.leftPad(sample3, 4, '0');
// normalized2 is '1500'
document.write(normalized1 + '<br/>');
document.write(normalized2 + '<br/>');
document.write(normalized3 + '<br/>');
The useful functions escape(string), trim(), format(value, start, length), toggle(value1, value2), and leftPad(string, size, [char]) all belong to the Ext.String class, which is an extension of the JavaScript String object.
The rest of the functions mentioned in this recipe belong to the Ext.util.Format class. Format is a singleton class that contains reusable formatting functions. Other useful functions in Format are htmlEncode(string) and htmlDecode(string).
Change the font size
Change margin width
Change background colour