ExtJS - disable depending on input value - extjs

Question

I have the code below to create a text field in the form.
buildForm : function() {
this.time = new Ext.form.TextField({
name : 'estimate',
allowBlank : false,
fieldLabel : 'Estimate',
onBlur : function(field) {
return this.setValue(this.getValue().replace('.', ','));
}
});
}
It works correctly.
Now, when I render this form, and in this field is value="abc", I need to set disabled to this field.
I tried:
disabled : function() { return this.getValue() == 'abc' ? true : false;}
disabled : function(field) { return this.getValue() == 'abc' ? true : false;}
disabled : function(field) { return field.getValue() == 'abc' ? true : false;}
disabled : this.getValue() == 'abc' ? true : false
But nothing of this work. Any idea?

Answer 1

Try this
change: function(field, newValue,) {
field.setDisabled(newValue == 'abc');
}
Check API for more info on events, methods for TextField
UPD:
If you need to disable textfield only on form render, just add this line in buildForm function.
this.time.setDisabled(this.time.getValue() == 'abc')
Another way is to add logic on TextField's render event.
render: function(field) {
field.setDisabled(field.getValue() == 'abc')
}
UPD 2:
I suppose, that your issue is on way of setting value or in the order.
Here's a working sample.
Notice this.time.setValue('abc')
instead of this.time.value = 'abc', which won't work.
buildForm: function() {
this.timeFld = Ext.create('Ext.form.TextField', {
name: 'estimate',
allowBlank: false,
fieldLabel: 'Estimate',
onBlur: function(field) {
return this.setValue(this.getValue().replace('.', ','));
},
listeners: {
render: function(field) {
field.setDisabled(field.getValue() == 'abc');
}
}
});
this.timeFld.setValue('abc');
// this.time.setDisabled(this.time.getValue() == 'abc');
Ext.create('Ext.form.Panel', {
title: 'Test',
items: [
this.timeFld
],
renderTo: Ext.getBody()
});
// alert(this.timeFld.getValue());
}