Add functions to a single ExtJS listener

Question

I am trying to add two functions inside the same listener to be able to combine two values of a combo with two fields disabled and to be enabled depending on the value that it chooses. This is the listener that I created:

listeners: {
            render: function() {
                var pago = this;
                    pago.onChangeCuentasFn();
                    pago.onChangeFormaPagoFn();
            }
}

And these are the functions that the Listener calls:

onChangeFormaPagoFn: function(combo, record, index) {
    var iban = Ext.getCmp('clieIban');
    iban.clearInvalid();
    if (record.data.codigo == 4) {
        iban.setDisabled(false);
    } else {
        iban.setDisabled(true);
    }
},

onChangeCuentasFn: function(combo, record, index) {
    var cuenta = Ext.getCmp('clieCuentas');
    cuenta.clearInvalid();
    if (record.data.codigo == 3) {
        cuenta.setDisabled(false);
    } else {
        cuenta.setDisabled(true);
    }
},

Do I have to add addListener or play with functions inside the listeners?

Thank you!

I'm not really sure what you're asking here. What is the problem with the code you currently have? — Evan Trimboli
– Evan Trimboli, Commented Mar 10, 2017 at 14:04
The listeners I created are a combo of a form and this contains a dropdown with 4 forms of payment. Then I have two fields deactivated and if I choose one form of payment it is activated one or the other. In this case they are the form of payment 3 and 4. But when I choose either one only unlocks one. One steps on another. Do you need to see the combo code? — Bufank85
– Bufank85, Commented Mar 10, 2017 at 22:50

bluehipy · Accepted Answer · 2017-03-11 10:19:08Z

The Observable method addListener it is cumulative in behavior. That means that if one is calling it twice bth of the handlers will get executed chronologically. If instance.addListener(eventName, handler1, scope1) AND instance.addListener(eventName, handler2, scope2) When eventName is fired handler1 gets executed and then handler2 gets executed (if handler1 does'n intentionally stope event propagation or returns false).

But declaring listeners in the config zone will not let you call the addListener twice. There you could use the implicit call as you did but keep the scope and arguments (which you don't), or combine the handlers with Ext.Function utilities Ext.Function.createSequence.

var sayHi = function(name){
 alert('Hi, ' + name);
};

sayHi('Fred'); // alerts "Hi, Fred"

var sayGoodbye = Ext.Function.createSequence(sayHi, function(name){
                                                       alert('Bye, ' + name);
                });

sayGoodbye('Fred'); // both alerts show

Implicit calling with scope and arguments:

listeners: {
        render: function() {
            var me = this;

            if( me.onChangeCuentasFn.apply(me, arguments)!== false ) { // give first hanlder a chance to stop execution if false is returned
              me.onChangeFormaPagoFn.apply(me, arguments);
           }
        }
}

The elegant way:

initComponent: function () {
  var me = this,
      combindHanlerFn = Ext.Function.createSequence(me.onChangeCuentasFn,me.onChangeFormaPagoFn, me);



  Ext.apply(me, {
    listeners: {
        render:combindHanlerFn 
     }
  });

  return me.callParent(arguments);
);

Collectives™ on Stack Overflow

Add functions to a single ExtJS listener

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related