ExtJS：复选框单击或键入事件

Question

Now I can handle change event of a checkbox in my controller . I do it like so:

"[itemId=TestCheckbox]": {
   change: this.updateCheckbox
}

What I do not like about this, is that this event fires even when the state of the checkbox is changed programmatically - when, for example, the value is bound at the first time. All this results in unnecessary server requests:

1. First request gets data from the server and binds the value to the checkbox
2. Change event is fired and another server request is done

I do not like this. I want something like keyup event, or check event, so that I could trigger server request, only when the state of the checkbox is changed by hand and not programmatically.

Answer 1

You could try adding a mousedown/keydown handler to the checkbox el , then setting a flag there, and check for that flag in the change event handler

{
    xtype:     'checkboxfield',
    listeners: {
        mousedown: {
            element: 'el',
            fn:      function (e, el) {
                Ext.getCmp(e.currentTarget.id).myFlag = true
            }
        },
        change:    function (cb, newValue, oldValue, eOpts) {
            console.log(cb, cb.myFlag)
        }

    }
}

Answer 2

If you are using setValue to set value to combo, it fires change event . Check here

You can use suspendEvents and resumeEvents to avoid this.

Call suspendEvents before setting value and call resumeEvents(true) after setting value.

suspendEvents will bloack all events fired by setValue and resumeEvents will agaib resume firing events . Don't forget to pass true argument to resumeEvents

combo.suspendEvents();
combo.setValue(value);
combo.resumeEvents(true);

Read more about suspendEvents and resumeEvents .