Book Image

Ext JS 3.0 Cookbook

Book Image

Ext JS 3.0 Cookbook

Overview of this book

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer. Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead. It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving themóour cookbook provides expert information for people working with Ext JS.
Table of Contents (15 chapters)
Ext JS 3.0 Cookbook
About the Author
About the Reviewer

Manipulating strings à la Ext JS

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.

How to do it...

You can manipulate strings as shown in the following steps:

  1. 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. 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/>');

How it works...

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).