2011-05-11 67 views
3

嗨,我有一个小组,我想滚动到特定postiton在面板怎么做呢ExtJS的滚动面板的位置

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

回答

5

设置面板的身体scrollTop的属性数量像素的要向下滚动:

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

已经尝试过一个,但不似乎工作...这我动态添加到tabpanel..using添加方法 – mayan 2011-05-11 07:00:04

+0

你可能会得到最好通过发布更全面的服务标签面板此面板部分代码示例在您的问题。简单地在TabPanel中不会影响设置滚动位置的能力。如果添加面板时没有立即使其激活,那么您可能需要执行一些操作,例如在TabPanel上设置deferredRender为false,但很难说没有看到如何添加面板以及如何尝试设置scrollTop。 – owlness 2011-05-11 12:21:48

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()函数并不必然检查,以确保滚动是此元素的可滚动的范围内,而滚动()函数,因此最好是使用滚动()函数。

例如

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

这里表示的“身体”的用途是什么? – vino20 2014-01-24 05:15:05

+0

'body'是您想要滚动的面板的主体。我真的不明白你想问什么。你能详细说明你的问题吗? – 2014-01-25 10:20:57

0

考虑父面板的大小有限,例如400px x 400px,并且父面板中可用的子面板大小为1000px x 1000px。所以通过滚动父面板完成,则代码应该像如下...

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

这里scrollBy(x值= 500,y值= 500,动画= TRUE),这样子面板对角滚动(practcally第一水平然后垂直)由父面板...

用来了解更多关于这个概念下面的例子... 我使用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); 
          } 
         } 
        } 
       }] 

      }] 
     }) 
    }); 
+0

用于向后滚动的负值... – vino20 2014-01-27 08:59:30

0

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

viewConfig: { 
     preserveScrollOnReload: true 
}