PDA

View Full Version : Need help: How to implement lost focus for textfield in ExtJSs 4



ranjansingh
5 Sep 2011, 9:26 PM
Hi,

Need help.

When a user type in a textfield - 0801234567891, automatically after its lost focus it should be
(080)1234567891.

thanks,
Ranjan

skirtle
6 Sep 2011, 3:21 AM
Some variation on this theme:


Ext.define('PhoneField', {
extend: 'Ext.form.field.Text',

maskRe: /[\d\(\)]/,

beforeBlur: function() {
var value = this.getValue().replace(/\D/g, '');

if (value.length >= 3) {
value = '(' + value.slice(0, 3) + ')' + value.slice(3);
}

this.setValue(value);
}
});

Note that beforeBlur is an override on a template method, not an event. You could also achieve the same effect using the blur event if you prefer.

ranjansingh
6 Sep 2011, 5:07 AM
Some variation on this theme:


Ext.define('PhoneField', {
extend: 'Ext.form.field.Text',

maskRe: /[\d\(\)]/,

beforeBlur: function() {
var value = this.getValue().replace(/\D/g, '');

if (value.length >= 3) {
value = '(' + value.slice(0, 3) + ')' + value.slice(3);
}

this.setValue(value);
}
});

Note that beforeBlur is an override on a template method, not an event. You could also achieve the same effect using the blur event if you prefer.

Thanks, it working.

I have tried with 'blur' event. Below is the code:

listeners: {
'blur': function() {
var zipCode = Ext.getCmp('zipcode');
var value = zipCode.getValue().replace(/\D/g, '');

if (value.length >= 3) {
value = '(' + value.slice(0, 3) + ')' + value.slice(3);
}

zipCode.setValue(value);
}
}

skirtle
6 Sep 2011, 5:14 AM
Please use CODE tags when posting code (# button on the editor toolbar).

I'd advise against using Ext.getCmp(). Try this instead:


listeners: {
blur: function(me) {
var value = me.getValue().replace(/\D/g, '');

if (value.length >= 3) {
value = '(' + value.slice(0, 3) + ')' + value.slice(3);
}

me.setValue(value);
}
}

ranjansingh
6 Sep 2011, 9:41 PM
Thanks for you valuable suggestion on Ext.getCmp(). Will take care from next time while sending the CODE.