Правильное событие для применения «scrollTo» для отображения динамически добавленной вложенной панели

Question

У меня есть панель в современном (мобильном) приложении ExtJS6, которая может перемещаться только по вертикали. Динамически добавляются субпанели. Мне нужно прокрутить панель до конца, добавив новую под-панель, чтобы сделать ее видимой. Это делается с помощью этой строки:

Ext.getCmp('tabmainMessagesPanel').getScrollable().scrollTo(Infinity, Infinity, true); 

Я исполняю эту линию нажатием кнопки, и она работает (но нужно нажать кнопку вручную). Я попытался найти правильное событие, когда я могу добавить эту строку, чтобы автоматически прокручивать, без успеха. Я почти пробовал все возможные релевантные события под-панели: показать, добавить, добавить, активировать, ... Я также безуспешно пробовал события родительской панели.

По-видимому, эти события происходят до того, как скроллер родительской панели учитывает добавленную под-панель, поэтому она прокручивается до последней. Здесь я чувствую асинхронное поведение. Доказательство состоит в том, что я вызываю метод scrollTo с задержкой на 0,5 секунды, и он работает. Но это решение не является надежным.

Вопрос: где (в каком событии какого компонента) эта строка кода должна идти, чтобы правильно прокрутить родительский элемент до конца?

[EDIT]

Вот часть кода относительно вопроса. Во-первых, Message класс:

Ext.define('MyApp.view.message.Message', { 
    extend : 'Ext.Panel', 
    xtype : 'message', 

    layout : 'hbox', 
    config : { 
     mBody : '' 
    }, 

    listeners: { 
     added: function (element) { 
      MyApp.view.main.Global.scroller.delay(500); //start a delayed task to scroll parent panel 
     } 
    }, 

    items: [ 
       { 
        flex : 1 
       }, 
       { 
        maxWidth: '80%', 
        width: 'auto', 
        html : '<div class="myClass">' + this.getMBody() + '</div>' 
       } 
    ] 
}); 

Вот отсроченное задача, которая прокручивает родительскую панель tabmainMessagesPanel до конца, чтобы показать вновь добавленного сообщения:

Ext.define('MyApp.view.main.Global', { 
    statics: { 
     scroller: Ext.create('Ext.util.DelayedTask', function() { 
     Ext.getCmp('tabmainMessagesPanel').getScrollable().scrollTo(Infinity, Infinity, true); 
     }) 
    } 
} 

Теперь вкладку панель, содержит панель tabmainMessagesPanel, которая будет содержать сообщения:

Ext.define('MyApp.view.main.TabMain', { 
extend : 'Ext.tab.Panel', 
mixins : [ 'Ext.mixin.Responsive' ], 
xtype : 'tabmain', 

responsiveConfig : { 
    portrait : { 
     items : 
     [ 
     { 
      title : 'Messages', 
      layout : 'vbox', 

      items : [ { 
       xtype: 'panel', 
       layout : 'vbox', 
       height: '100%', 
       id: 'tabmainMessagesPanel', 
       scrollable : 'vertical', 
       style : 'background-color:#F0F0F0' 
      }, 
      { 
       xtype : 'inputfield', 
       docked : 'bottom' 
      }] 
     }, 
     { 
      title : 'Connect', 
      layout: 'vbox', 
      items : [ 
        //some UI elements 
      ] 
     } 
     ] 
    }, 

    //-------------------------------------------------- 

    landscape : { 
     // same as portrait 
    } 
}, 

//-------------------------------------------------- 

controller : 'tabmain', 
viewModel : 'tabmain', 

defaults : { 
    tab : { 
     iconAlign : 'top' 
    }, 
    styleHtmlContent : true 
} 

}); 

Наконец, это событие в контроллер, который создает и добавляет сообщение tabmainMessagesPanel при поступлении нового сообщения:

handle_message: function (mess) { 
    var p = Ext.create('MyApp.view.message.Message', { 
      mBody : mess.body 
     }); 
    Ext.getCmp('tabmainMessagesPanel').add(p); 
} 

Answer 1

Вот ответ на этот вопрос. Я нашел его через 6 месяцев. Я размещаю его здесь для тех, кто может иметь такую ​​же проблему.

Решение состоит в том, чтобы определить событие refresh скроллера панели tabmainMessagesPanel и прокрутить до конца в нем. Таким образом, определение панели tabmainMessagesPanel становится:

 { 
      xtype: 'panel', 
      layout : 'vbox', 
      height: '100%', 
      id: 'tabmainMessagesPanel', 
      scrollable : 'vertical', 
      listeners: { 
       initialize: function (me) { 
        me.getScrollable().on('refresh', function() { 
         me.getScrollable().scrollTo(Infinity, Infinity, true); 
        }); 
       } 
      }, 
      style : 'background-color:#F0F0F0' 
     }