嵌套的卡片布局面板引发意外的激活事件,[ExtJS]

4zcjmb1e  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(169)

以下代码

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

会立刻输出。
我想将面板2.1中的一个文本字段聚焦到激活状态,但事件被触发,甚至整个2.1面板的字段都还没有呈现,因为它是非活动面板2的子项。这是一个功能还是错误?我应该使用不同的方法吗?谢谢您的帮助。
Sencha 琴
https://fiddle.sencha.com/fiddle/39vc

lbsnaicq

lbsnaicq1#

你的两个卡片布局面板(容器)将有一个活动项。这就是为什么它们都触发了activate事件。
我会将焦点放在activitemchange事件上并初始化。
小提琴
我不得不在init中做一个延迟来确保字段被呈现。也许有一个更好的方法来做到这一点。请参见底部的按钮来在两个面板之间切换。

相关问题