ExtJS - disable depending on input value

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());
    }