我在 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);
}