如何在Ext JS中侦听用户编辑而不是文本字段的程序编辑？

Question

I added a listener to the change event on a TextField . When the user changes the value in the text field, my listener gets control. This is great.

In some cases, I want to restore the old value in the listener. However, when I call the setValue method in the listener, the change event fires again. What is the best way to restore the old value programmatically without the event firing again?

Answer 1

You can set flag on TextField indicating that you change value programatically. Eg:

new Ext.form.TextField({
    renderTo: 'container',
    listeners: {
        change: function(sender, newValue, oldValue) {
            if (this.restoringValue) {
                return;
            }
            if (newValue == 'XXX') {
                this.restoringValue = true;
                this.setValue(oldValue);
                delete this.restoringValue;
            }
        }
    },
    value: 'XXX'
});

If you don't have any buffers or delays on change listener it should work.

Answer 2

I found a solution to stop the check change event that is a property on the field that the checkChange event looks for. it's

field.suspendCheckChange = true

this is because the checkChange function that is fired by the setValue method is

checkChange: function() {
        var me = this,
            newVal, oldVal;

        if (!me.suspendCheckChange) {
            newVal = me.getValue();
            oldVal = me.lastValue;

            if (!me.isDestroyed && me.didValueChange(newVal, oldVal)) {
                me.lastValue = newVal;
                me.fireEvent('change', me, newVal, oldVal);
                me.onChange(newVal, oldVal);
            }
        }
    },

this is in 5.1, not sure if it's earlier versions..

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/source/Field.html#Ext-form-field-Field-method-checkChange

Answer 3

Edit the event handler to look at the caller of the function. Based on that, drop out of the event handler.

See: How to get the caller event and dom element id

Answer 4

setRawValue( Object value ) : Object

Sets the field's raw value directly, bypassing value conversion, change detection, and validation. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Base-method-setRawValue