ExtJs form validation

Question

I have this form in ExtJs. If field1 is not empty, field2 must not be empty. But it is not working even though the listener is firing.

 {
    xtype: 'panel',
    title: 'title 1',
    items: [{
        xtype: 'fieldset',
        title: 'field A',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Line 1',
            id: 'field1',
            listeners: {
                change: function(f, new_val) {
                    if (new_val) {
                        //alert("change" + new_val);
                        f.field2.allowBlank = false;
                    } else {
                        f.field1.allowBlank = true;
                    }
                }
            }
            code for field2
        }]
    }]
}

Answer 1

Partial answer:

The reason your code doesn't work is because allowBlank is a configuration value -- it only has an effect at the time the component is created. I see this mistake all the time -- when browsing the API docs, you need to keep in mind that all those configuration options are only potent at object creation -- they are not public properties that you can set to modify behavior of an existing object.

That said, I'm surprised that there's no setAllowBlank() method in the API. I'll continue to look around and amend this answer if I'm able to find a way to do it.

EDIT: It appears your method should work, from my reading of the TextField source code. So the question is why isn't it.

EDIT2: You're probably failing to get a reference to your TextFields. f.field1 is probably not pointing at what you think it is. You can solve this by adding a ref:'field1' to your TextField config. Then your FormPanel will have a property called field1 you can reference.

Answer 2

You can use the markInvalid function. For example:

if (new_val) {
    if(f.field2.getValue() == ''){
        f.field2.markInvalid('Cannot be empty');
    }
} else {
    // clears invalid flags on the field.
    f.field1.clearInvalid();
}

Not saying this is the exact code to use but you can see from this how to mark invalid and clear invalid messages. There is also the capability of creating your own validators though I am not sure that would completely fit your needs.