将函数添加到单个 ExtJS 侦听器答案

【问题标题】：Add functions to a single ExtJS listener将函数添加到单个 ExtJS 侦听器
【发布时间】：2017-03-10 13:32:50
【问题描述】：

我正在尝试在同一个侦听器中添加两个函数，以便能够将组合的两个值与禁用的两个字段组合起来，并根据它选择的值启用。这是我创建的监听器：

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

这些是 Listener 调用的函数：

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

我是否必须添加 addListener 或在侦听器中使用函数？

谢谢！

【问题讨论】：

我不太确定你在这里问什么。你目前的代码有什么问题？
我创建的监听器是一个表单的组合，其中包含一个包含 4 种付款方式的下拉列表。然后我有两个字段被停用，如果我选择一种付款方式，它会被激活其中一种。在这种情况下，它们是付款方式 3 和 4。但是当我选择其中一个时，只能解锁一个。一个踩另一个。需要看组合码吗？

标签： javascript extjs

【解决方案1】：

Observable 方法addListener 在行为上是累积的。这意味着如果一个人调用它两次，那么处理程序将按时间顺序执行。如果 instance.addListener(eventName, handler1, scope1) 和 instance.addListener(eventName, handler2, scope2) 当eventName 被解雇时 handler1 被执行，然后 handler2 被执行（如果 handler1 没有故意停止事件传播或返回 false）。

但是在配置区声明监听器不会让你调用addListener 两次。在那里，您可以像以前一样使用隐式调用，但保留范围和参数（您不这样做），或者将处理程序与 Ext.Function 实用程序 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

使用范围和参数进行隐式调用：

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

优雅的方式：

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



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

  return me.callParent(arguments);
);

【讨论】：