動的に追加されたネストされたパネルを表示するために "scrollTo"を適用する適切なイベント

Question

私はExtJS6モダン（モバイル）アプリケーションでパネルを垂直方向にのみスクロールできます。サブパネルは動的に追加されます。新しいサブパネルを追加した後、パネルを最後までスクロールして表示する必要があります。

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

ボタンクリックでこの行を実行しますが、手動でボタンをクリックする必要があります。私はこの行を追加してスクロールを自動的に行い、成功することなく適切なイベントを見つけようとしました。サブパネルの可能なすべての関連イベントをほぼ試してみました：ショー、追加、追加、アクティブ化...私は親パネルのイベントを成功させずに試しました。

明らかに、これらのイベントは、親パネルのスクロール側が追加されたサブパネルを考慮に入れてから、最後のものまでスクロールします。私はここで非同期的な振る舞いをします。私がscrollToメソッドを0.5秒の遅延タスクで呼び出すことが証明されています。しかし、この解決策は信頼できません。

質問は次のとおりです。親の末尾を正しくスクロールするには、このコード行がどこに移動する必要がありますか？

ここで[編集]

質問に関するコードの一部です。まず、Messageクラス：今

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

、タブパネルその：

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をスクロール遅延タスクがありますメッセージが含まれていますパネル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 
} 

}); 

は最後に、これが作成され、にメッセージを追加するコントローラでのイベントです新しいメッセージが到着するたびに：

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

Answer 1

ここに答えがあります。私は6ヶ月後にそれを見つけました。私は同じ問題があるかもしれない人々の利益のためにここに掲示します。

解決策は、パネルtabmainMessagesPanelのスクロールバーのイベントrefreshを定義し、その末尾までスクロールします。だから、パネル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' 
     }