Binding a Button's disabled/enabled state to a Form's validity state

[yarmy]

So I want my submit button to be enabled/disabled depending on the form's validity status. For example,

var registerButton = new Ext.Button({
    text: 'Register',
    handler: function() {},
    disabled: true
});
        
var firstnameField = new Ext.form.TextField({
    fieldLabel: 'First Name',
    name: 'firstname',
    allowBlank: false
});

firstnameField.on('change', function() {
    registerButton.setDisabled(!formPanel.form.isValid());
});

var secondnameField = new Ext.form.TextField({
    fieldLabel: 'Second Name',
    name: 'secondname',
    allowBlank: false
});

var formPanel = new Ext.FormPanel({
    region: 'center',
    title: 'Register Form',
    labelWidth: 80,
    frame: true,
    defaults: {width: 200},
    items: [firstnameField, secondnameField],
    buttons: [registerButton]				
});

new Ext.Viewport({
    layout: 'border',
    items: formPanel
});

It seems the button's disabled property does change, but changing the property doesn't re-render the button.

[tryanDLS]

This functionality is already built into the Form - you don't have to code it yourself. Add formBind:true to the button config for any buttons in the form you want to manage. Then after creating the form, call form.startMonitoring(). This will check the form's validity on a timer and enable/disable the buttons. You should call form.stopMonitoring() before actually submitting so the timer doesn't continue to run.

[yarmy]

Every day's a school day. Thanks.