How to convert a Sencha ExtJS textfield to uppercase on the textfield blur event

This brief Sencha tutorial shows how to convert the text in a Sencha ExtJS textfield to uppercase on the textfield blur event. I use this technique on the symbol field in a form where I let users enter stock symbols, such as “AAPL”, “GOOG”, etc.

First, the symbol field in my StockForm.js view component is defined like this:

{
    fieldLabel: 'Symbol',
    name: 'symbol',
    itemId: 'symbol',
    allowBlank: false,
    enableKeyEvents: true,      // needed to handle the [Enter] key and Blur event
    maskRe: /([a-zA-Z0-9]+)$/   // only allow letters and numbers, no spaces
},

Next, the Sencha controller code looks like this:

// more code ...

init: function(application) {

    this.control({
        // more code ...

        'stockform textfield#symbol': { //handle blur event on the symbol textfield
            blur: this.onStockFormSymbolFieldBlur
        }

    });

    // more code ...
},

// more code ...

// uppercase the stock symbol field (such as 'aapl' -> 'AAPL') on the textfield blur event
onStockFormSymbolFieldBlur: function(textfield, event, options) {
    textfield.setValue(textfield.getValue().toUpperCase());
},

This code is known to work with Sencha ExtJS 4.x, and is extracted from my Sencha ExtJS Finance application.