垂直方向にのみスクロールできる ExtJS6 モダン (モバイル) アプリケーションのパネルがあります。サブパネルが動的に追加されます。新しいサブパネルを追加した後、パネルを表示するためにパネルを最後までスクロールする必要があります。これは、次の行を使用して行われます。
Ext.getCmp('tabmainMessagesPanel').getScrollable().scrollTo(Infinity, Infinity, true);
ボタンクリックでこの行を実行すると、機能します（ただし、ボタンを手動でクリックする必要があります）。この行を追加してスクロールを自動的に実行できる適切なイベントを見つけようとしましたが、成功しませんでした。サブパネルに関連する可能性のあるすべてのイベントをほぼすべて試しました：表示、追加、追加、アクティブ化...親パネルのイベントも試しましたが成功しませんでした。
どうやら、これらのイベントは、親パネルのスクローラーが追加されたサブパネルを考慮する前に発生するため、最後の前のものにスクロールします。ここで非同期動作のにおいがします。その証拠はscrollTo、0.5 秒の遅延タスクでメソッドを呼び出すと、それが機能することです。しかし、このソリューションは信頼できません。
問題は、親を最後まで正しくスクロールするために、このコード行をどこ (どのコンポーネントのどのイベント) に置くべきかということです。
[編集]
これが質問に関するコードの一部です。まず、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);
}