Ext JS 4.1 - User-defined validation doesn't bind button - extjs

Question

I defined a validation which controls if the id is unique or not to bind a button. It works well with built-in validations well, but it doesn't bind for my own validation.
Here's what I've tried:
View - FormPanel:
Ext.define(appName + '.view.user.UserForm', {
extend: 'Ext.form.Panel',
requires: [appName + '.view.language.LanguageCombo'],
alias: 'widget.userform',
// title : 'User Form',
iconCls: 'icon-form',
frame: true,
padding: '5 5 0 5',
border: true,
buttonAlign: 'right',
width: '100%',
// height : 200,
monitorValid: true,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 110,
anchor: '98%',
allowBlank: false,
selectOnFocus: true,
msgTarget: 'side'
},
initComponent: function () {
var me = this;
this.title = bundle.getMsg('userform.title');
this.items = [{
xtype: 'numberfield',
minValue: 1,
fieldLabel: bundle.getMsg('userform.field.recordId'),
name: 'recordId',
itemId: 'recordId'
}, {
];
this.btnReset = Ext.create('Ext.ux.button.ResetButton', {
handler: function (btn) {
me.getForm().reset();
}
});
this.btnSubmit = Ext.create('Ext.ux.button.SaveButton', {
disabled: true,
formBind: true
});
this.buttons = [me.btnReset, me.btnSubmit];
this.callParent(arguments);
}
});
Controller Method:
var form = this.getUserForm();
if (field.getValue() && field.getValue() != '') {
Ext.Ajax.request({
url: 'user/chkRecordIdUnique.ajax',
method: 'POST',
params: {
recordId: field.getValue()
},
success: function (response, options) {
var res = Ext.decode(response.responseText);
if (!res.success) {
field.markInvalid(bundle.getMsg('record.taken'));
form.getForm().markInvalid(bundle.getMsg('record.taken'));
}
}
});
}

Answer 1

According to the docs, markInvalid doesn't actually change the validity of a field. It just applies the visual styles as if the field had an error. And there's no isValid property to set. All validity is determined by an immediate call to the isValid method.
As it stands, Ext JS forms do not support asynchronous validation natively. It assumes that either all validation is done on the client side, or that the server will perform validation. If you want to perform an Ajax call to determine if the form is valid before enabling the save button, I would recommend making your own validate method with a success callback. Manually enable the save button if the Ajax call succeeds and the rest of the form is valid. Then on form change, you can disable the save button again.
Side note: width should be a number, not a percentage.