Nested card layout panels fire unexpected activate events. [ExtJS]

Question

Following code

Ext.define('Fiddle.Panel', {
    extend: 'Ext.Container',
    layout: 'card',
    items: [{
        html: 'Check the console. Panel 2.1 fires activate event desipte the panel 1 being active',
        xtype: 'panel',
        listeners: {
            activate: function (){
                console.log('1 active');
            }
        }
    },{
        xtype: 'panel',
        layout: 'card',
        items: [{
            xtype: 'panel',
            // items: [... fieldpanel, fields here]
            listeners: {
                activate: function (){
                    console.log('2.1 active');
                }
            }
        },{
            xtype: 'panel',
            listeners: {
                activate: function (){
                    console.log('2.2 active');
                }
            }
        }
        }],
        listeners: {
            activate: function (){
                console.log('2 active');
            }
        }
    }]
});

Will immediately output.

1 active
2.1 active

I would like to focus a text field in the panel 2.1 on activation, but the event is fired even the field respectively whole 2.1 panel is not rendered yet as it is a child of inactive panel 2. Is this a feature or bug ? Should I use different approach ? Thank you for help.

Sencha Fiddle

https://fiddle.sencha.com/fiddle/39vc

mcg1103 mcg1103 · Accepted Answer · 2020-10-29T16:32:29

Your two card layout panels (containers) will have an active item. So that is why they are both firing the activate event.

I would do the focus on the activeitemchange event and init. Here is a fiddle:

Fiddle

I had to do a defer in the init to be sure the field was rendered. there may be a better way to do this. See the buttons at the bottom to switch between the two panels.

Nested card layout panels fire unexpected activate events. [ExtJS]

1 Answers