Ext JS - 自动添加监听器

Ext JS - adding listeners automatically

假设我们有一个包含很多元素的表单。

我想要一种通过通用代码的方法,以便能够向这些元素添加侦听器,例如,所有具有内置 focus 事件的元素,如文本输入或下拉菜单,将有这个 onFocus 监听器。在粗略的伪代码中,是这样的:

for each element in document
    if hasBuiltInFocusEvent(element)
        element.addListener(element, 'focus', indicateOnFocus);

function indicateOnFocus(element)
{
    log(currentTime(), element.id, 'focus');
}

理想情况下,无需 修改元素的现有 class 定义。我可以在显示表单之前调用一次代码来设置监听器。

请原谅我普遍缺乏知识。我感兴趣的是这是否可行,特别是避免必须为每个元素硬编码侦听器,因为通用的泛型方法有很多优点。

在开箱即用的 Ext JS 中全局报告焦点更改:

Ext.on('focus', function(data) {
    console.log('Focus changed from ' + data.fromElement + ' to ' + data.toElement);
});

有几种方法可以实现这一点。对于焦点事件,正如DrakeES所说,它已经存在了。

对于不是的事件,您可以从字段(例如在基本字段 class 中)到表单冒泡事件。在表单中,您可以收听该事件,在处理程序中,您可以查看哪个字段使事件冒泡。

这是一些未经测试的代码:

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Enter your name',
            items: [
                {
                    xtype: 'textfield',
                    **bubbleEvents: 'TheEvent',**
                    label: 'First Name',
                    name: 'firstName'
                },
                {
                    xtype: 'textfield',
                    **bubbleEvents: 'TheEvent',**
                    label: 'Last Name',
                    name: 'lastName'
                }
            ]
        }
    ],
    listeners: {
        /*
         * TheEvent( this, e, eOpts )
         *
         * this : Ext.field.Field
         * e : Event - The tap event
         * eOpts : Object - The options object passed to Ext.util.Observable.addListener.
         */
        TheEvent: function (field, event, opt) {
            /*
             * fireEvent( eventName, args ) : Boolean
             *
             * eventName : String - The name of the event to fire.
             * args : Object... - Variable number of parameters are passed to handlers.
             */
            this.fireEvent('formfieldTheEvent', field, event, opt);
        }
    }
});

从那里您可以从您的控制器或其他任何地方收听 'formfieldTheEvent' 并检查触发事件的字段,例如通过名称或 ID 或操作。

您也可以通过在事件域中绑定事件来完成此操作。使用正确的 select 或者您可以 select 表单上的所有字段并绑定您喜欢的事件。

Ext.define('CustomController', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.listen({
            controller: {},
            component: {
                'textfield': {
                    TheEvent: function(field, event, eOpts ) {
                         ....
                    }
                }
            },
            direct: {},
            global: {},
            store: {}
        });
    }
})