extjs - 嵌套的卡片布局面板会触发意外的激活事件。[ExtJS]

Question

以下代码

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

会立即输出。

1 active
2.1 active

我想将面板 2.1 中的文本字段集中在激活上，但是即使字段分别整个 2.1 面板还没有呈现，因为它是非活动面板 2 的子项，所以会触发事件。这是功能还是错误？我应该使用不同的方法吗？谢谢你的帮助。

煎茶小提琴

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

Answer 1

您的两个卡片布局面板（容器）将有一个活动项目。这就是为什么他们都触发了激活事件。

我将重点放在 activeitemchange 事件和 init 上。这是一个小提琴：

小提琴

我必须在 init 中进行延迟以确保该字段已呈现。可能有更好的方法来做到这一点。请参阅底部的按钮以在两个面板之间切换。