Extjs滚动面板到指定位置

Question

您好，我有一个面板并且想要滚动到该面板的特定位置，应该如何实现呢？

var tabs= new Ext.Panel({
    id:id,      
    title:text,
    autoScroll:true,
    iconCls:'windowIcon',
    closable:true,
    closeAction:'hide'
});

- mayan

Answer 1

将面板的正文部分的scrollTop属性设置为您想要向下滚动的像素数：

// Scroll the body down by 100 pixels.
tabs.body.dom.scrollTop = 100;

- owlness

---

已经尝试过了，但似乎不起作用...这个面板是选项卡面板的一部分，我正在动态添加到选项卡面板中...使用add方法。 - mayan

您最好在问题中发布更详细的代码示例，这样可能会更好地为您服务。仅仅处于TabPanel中并不会影响设置滚动位置的能力。如果您添加面板后没有立即激活它，那么您可能需要在TabPanel上设置deferredRender为false，但是如果没有看到您如何添加面板以及如何尝试设置scrollTop，很难说出问题在哪里。 - owlness

Answer 2

另一种选择是在此处使用函数scrollTo()，详情请查看http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Element-method-scrollTo。例如：

Ext.getCmp('graph_panel').body.scrollTo('left',250);  
Ext.getCmp('graph_panel').body.scrollTo('top',200); 

但是 scrollTo() 函数并不会对滚动范围进行边界检查，而 scroll() 函数会，因此最好使用 scroll() 函数。

例如：

Ext.getCmp('graph_panel').body.scroll('left',300);
Ext.getCmp('graph_panel').body.scroll('bottom',300);

- Pratik Patel

---

这里表示的“body”有什么用途？ - vino20

"body"是您想要滚动的面板主体。我不太明白您想问什么。您能说明一下吗？ - Pratik Patel

Answer 3

考虑父面板有限的大小，如400px x 400px，而子面板可用于父面板内，其大小为1000px x 1000px。因此，当由父控件完成滚动时，代码应如下所示...

Ext.getCmp('id_of_Parent_panel').scrollBy(500, 500, true);

在这里使用scrollBy(x-value=500,y-value=500,animation=true)函数，使子面板沿对角线滚动（实际上先水平滚动，然后垂直滚动）...

以下示例用于更好地理解此概念...我正在使用ExtJs 4.2.1

Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {            
            title:'Parent',
            height: 200,
            autoScroll: true,
            width: 700,
            id:'Parent',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Child',
                height: 1000,
                width: 1000,              
                items:[{
                    xtype: 'button',
                    text: 'Please Scroll me....',
                    listeners: {
                        click: {
                            fn: function () {
                                Ext.getCmp('Parent').scrollBy(500, 500, true);
                            }
                        }
                    }
                }]

            }]
        })
    });

- vino20

Answer 4

您可以在视图配置中添加 preserveScrollOnReload 配置属性。

viewConfig: {
        preserveScrollOnReload: true
 }

- kiran