How to Save Button on change

Question

To enable or disable a save button in extjs I made a simple example:

var panelData = [first = 'true', second = "false"]
TestFormPanel = new Ext.form.FormPanel({
    title: 'TestPanel',
    data: panelData,

    buttons: [
        new Ext.Button({
            id: 'saveButton',
            text: 'save',
            scope: this,
            disabled: true,
            handler: function () {
                panelData = this.getForm().getValues();
                console.log(panelData);
            }
        })],
    defaults: {
        xtype: 'checkbox',
        listeners: [{
            check: function () {
                console.log('check');
                this.saveButton.enable();
            }
        }]
    },
    items: [
        {
            name: 'first',
            fieldLabel: 'first box'

        },
        {
            name: 'second',
            fieldLabel: 'second box'
        }
    ]
});

Ext.onReady(function () {
    console.log('started');
    TestFormPanel.render(document.body)
})

The check event is never triggered. I tried lots of other listeners like click, containerclick or select none was triggered. Ho can I detect a change in the checkboxes?

Answer 1

I think the problem, that there no check event for this field. Try to use change event. Also i think, array notation is explicit http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox-event-change It should be :

listeners: {
        change: function () {
            console.log('change event');
        }
    }