Question

假设我们有一个包含大量元素的表单。

我想通过通用代码，以便能够向这些元素添加侦听器，以便例如所有具有内置focus事件的元素（如文本输入或下拉列表）将具有这个onFocus听众。在粗略的伪代码中，类似这样的东西：

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

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

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

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

Answer 1

在开箱即用的Ext JS中全局报告焦点变化：

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

Answer 2

有几种方法可以实现这一目标。对于焦点事件，正如DrakeES所提到的，它已经存在。

对于非事件，您可以将字段中的事件（例如基本字段类）中的事件冒泡到表单。在表单中，您可以收听该事件，在处理程序中，您可以查看哪个字段确实使事件起泡。

以下是一些未经测试的代码：

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或动作。

您还可以通过绑定eventdomains中的事件来实现此目的。使用正确的选择器，您可以选择表单上的所有字段并绑定您喜欢的事件。

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

Ext JS - 自动添加监听器

2 个答案: