应用“scrollTo”以显示动态添加的嵌套面板的正确事件

Posted 2023-02-26

【中文标题】应用“scrollTo”以显示动态添加的嵌套面板的正确事件

【英文标题】：The right event to apply "scrollTo" to show a dynamically added nested panel

【发布时间】：2016-05-19 14:19:04

【问题描述】：

我在 ExtJS6 现代（移动）应用程序中有一个面板，只能垂直滚动。子面板会动态添加到其中。添加新的子面板后，我需要将面板滚动到末尾以使其可见。这是使用此行完成的：

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

我在单击按钮时执行此行，它可以工作（但需要手动单击按钮）。我试图找到正确的事件，我可以在其中添加此行以自动滚动，但没有成功。我几乎尝试了子面板的所有可能相关事件：显示、添加、添加、激活……我也尝试了父面板的事件，但没有成功。

显然，这些事件发生在父面板的滚动条考虑添加的子面板之前，因此它滚动到最后一个之前。我在这里闻到了异步行为。证明是我在 0.5 秒的延迟任务中调用 scrollTo 方法并且它有效。但是这个解决方案并不可靠。

问题是：这行代码应该去哪里（在哪个组件的哪个事件中）才能正确地将父级滚动到其末尾？

[编辑]

这是有关问题的代码部分。一、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);

【问题讨论】：

@Brett 我在问题中添加了代码。

【参考方案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'