View Full Version : TextField that displays a custom version of its value (ExtJS 3.3)

4 May 2011, 11:50 AM
Hello all,

I have a textfield in my form which is supposed to represent a telephone number. I don't necessarily want to force the user to enter this in any particular format so I would like to leave it as a standard free-form textfield. However, if the component does not have focus and the current value is something that looks like a phone number I would like to apply common formatting to it.
Value = 1234567
Displayed = 123-4567

When the user clicks on the text field to edit the value, I would like it to render as normal (just '1234567' in this case), so the formatting I want to apply would be cosmetic-only.

It was suggested to me to use the onFocus and onBlur events on a NumberField to alter the field's value. But I think this would be too rigid, for various reasons I don't want to force users to enter strictly numeric values (IE: Some existing values might look like "1234567 ext. 123"). I really only want to apply a format to the way the value is *displayed* in some cases without affecting what's submitted or input. I'm sure I can write the JS code to do that part, I just don't know where best to put it :)

Is there a simple way to do this? Thanks for any help!

5 May 2011, 4:37 AM
There's no simple/easy way to do what you describe and your formatting restrictions are pretty loose, which makes it even more difficult. All said and done, we're talking about a text entry field here and there's no auto-magic way to make it act as a custom renderer field vs. a text input field; other than the aforementioned solution of focus/blur handling.

Realizing that the phone number formatting in my example is quite rigid and not what you're looking for, I still provide this example code in hopes that regex bits will help you:

I typically use a textfield and add a RegEx expression to the maskRe attribute, to prevent the user from entering non-qualifying characters. I also add a RegEx expression to the regex attribute to validate that the user's entry conforms to a desired format; this is obviously a lot more restrictive than what you want, but you can play with the regex expression to loosen up the validation.

Also note that on blur, I auto-format the field value if the user enter a plain, 10-digit number with no formatting:

xtype: 'textfield', // PAGER
allowBlank: true,
// this is the only way to limit the max number of bytes a user can enter
// enter into a text field.
autoCreate: {
tag: 'input',
type: 'text',
size: '14',
autocomplete: 'off',
maxlength: '14'
fieldLabel: 'Pager',
listeners: {
blur: {
fn: function(textfield) {
var value = textfield.getValue();
// if user keys a 10 digit number with no formatting, format it for them.
if (value.length == 10 && value.indexOf('-') == -1 && value.indexOf('(') == -1 && value.indexOf(')') == -1)
value = '(' + value.substr(0,3) + ') ' + value.substr(3, 3) + '-' + value.substr(6);
maskRe: /[0-9 \-()]/,
maxLength: 14,
name: 'pager',
// value must be in format of (999) 999-9999.
regex: /^[(]\d{3}[)] \d{3}-\d{4}$/,
selectOnFocus: true,
width: 110