CODEWITHSUNDEEP
javascriptextjs
Bufank85
Bufank85

Reputation: 75

Add functions to a single ExtJS listener

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!

Upvotes: 0

Views: 1155

Answers (1)

bluehipy
bluehipy

Reputation: 2294

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);
);

Upvotes: 1

Related Questions