Using blur on Textfield in extjs causes error - extjs

Question

I am new to extjs. I am using extjs-4.1.0, I have a textfield and I wish to call trim method on its blur event. My code works fine on mozilla firefox, but causes javascript error, "Object doesn't support this property or method" on IE when the textbox loses focus.
Is there any other way to deal with blur event in IE?
Find my code below:
{
flex:1,
xtype:'textfield',
fieldLabel: 'Name',
allowBlank: false,
maxLength: 50,
name: 'name',
maskRe: /[a-zA-Z\s]+$/,
validator: function(v) {
if(!(/[a-zA-Z\s]+$/.test(v))){
return "This Field should be in alphabets";
}
return true;
},
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Format: John/John Kelvin'
})
},
blur: function(d) {
var newVal = d.getValue().trim();
d.setValue(newVal);
}
}
}

Answer 1

I put the listener inside a controller, and is seems to work fine in IE.
Ext.define('BM.controller.FormControl', {
extend: 'Ext.app.Controller',
views: [
'MyForm'
],
init: function() {
if (this.inited) {
return;
}
this.inited = true;
this.control({
'my-form > field': {
blur: this.outOfFocus
}
});
},
outOfFocus: function(field, event) {
var newVal = field.getValue().trim();
field.setValue(newVal);
}
});

Answer 2

My guess is that this has nothing to do with blur and actually field.getValue() is not a string in certain cases such as null or numeric or something along that line. Try replacing var newVal = field.getValue().trim();
with
var newVal = Ext.String.trim(field.getValue());

Answer 3

Browser IE 7/8 returns the text field value (d.getValue()) as NULL when text field is empty, so method call to trim() is failed since no valid object was created.
The below solution works for me in all browsers:
this.setValue(Ext.util.Format.trim(this.getValue()));