Programmatically set an Ext.TextField to be valid

Question

I have made my own custon vtype which performs an ajax request to check if a username is available in the database:

Ext.apply(Ext.form.VTypes, {

    username: function(val, field) {
        var conn = new Ext.data.Connection();
        conn.request({
            url: '/account/CheckUsernameAvailability',
            params: { "username": val },
            success: function(data) {
                console.log("field = ", field);
                console.log(data.responseText);
            },
            failure: function() {
                Ext.Msg.alert('Status', 'Unable to add vote');
            }
        });
    },

    usernameText: 'Username is already taken'
});

The problem is that the request is obviously asynchronous so I cant just return true if the data.responseText is OK. Within this function I need to be able to set "field" to be valid.

But I cant seem to find anything in the Ext API that shows how to do this? (i guess i must be missing something)

Answer 1

return true from function and call field.markInvalid() on failure

Answer 2

but markInvalid() does not set the field as invalid. It just set the css class for invalid filed. If we call the isValid() method on the filed it returns true.