Delegated events are not firing

[magbeat]

Hi there

I am trying to understand how Sencha Architect creates event listeners.
Look at the following example:

teamSettings.png

This creates the following code (only relevant parts shown):

Ext.define('MyApp.view.SettingsView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.settingsView',


    config: {
id: 'settingsView',
        iconCls: 'settings',
        items: [
            {
                xtype: 'fieldset',
                itemId: 'teamSettings',
                title: 'Team Einstellungen',
                items: [
                    {
                        xtype: 'textfield',
                        itemId: 'teamCode',
                        label: 'Team Code',
                        labelWidth: '50%'
                    },
                                        ...
                                        ]
                         }
                ]

        listeners: [
            {
                fn: 'onTeamCodeShow',
                event: 'show',
                delegate: '#teamCode'
            },
            {
                fn: 'onTeamCodePainted',
                event: 'painted',
                delegate: '#teamCode'
             },
            {
                fn: 'onTeamCodeInitialize',
                event: 'initialize',
                delegate: '#teamCode'
            }
        ]
    },

    onTeamCodeShow: function(component, options) {
        console.log("show");
    },


    onTeamCodePainted: function(component, options) {
        console.log("painted");
    },


    onTeamCodeInitialize: function(component, options) {
        console.log("initialize");
    }
});

None of the events are logged in the console. If I change the listeners from hand to:

        listeners: [
            {
                fn: 'onTeamCodeShow',
                event: 'show'
                //delegate: '#teamCode'
            },
            {
                fn: 'onTeamCodePainted',
                event: 'painted'
                //delegate: '#teamCode'
             },
            {
                fn: 'onTeamCodeInitialize',
                event: 'initialize'
                //delegate: '#teamCode'
            }
        ]

All of the events are logged in the console.

Am I understanding something completely wrong here?
Thanks for your help.

Cheers,
Markus

[bharatn]

Hi Markus,

Sorry for the late reply. What you are seeing for events not firing for initialize/painted etc is because the child textfield is already initialized/painted before the parent listeners are setup. If you remove the delegates those events that you see fired will be for SettingsView and not for the textfield. This is an issue only for events that get fired initially during the child component construction. Any other events like change, click, tap would still work.

For now, i suggest you add these events to the parent (SettingsView) in architect. You are not loosing any functionality that way. And ideally you should be adding listeners to a controller.

We are looking at the issue for initialize listeners at the child level and will provide a fix soon.

Thanks