Блог

Следующий код

 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

У ваших двух панелей компоновки карт (контейнеров) будет активный элемент. Вот почему они оба запускают событие активации.

Я бы сосредоточился на событии activeitemchange и инициализации. Вот скрипка:

Скрипка

Мне пришлось отложить инициализацию, чтобы убедиться, что поле было отображено. возможно, есть лучший способ сделать это. Смотрите кнопки внизу для переключения между двумя панелями.