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.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.