6

I am working with ExtJS4 and looking for a way to implement "Go to top" functionality.

i.e. On the click of "top" button, the view should scroll back to the top of the component. How can I achieve this in ExtJS?

sra
  • 23,629
  • 7
  • 52
  • 88
user1722857
  • 877
  • 2
  • 18
  • 33

2 Answers2

5

In addition to rixo's answer (which would be the easiest way for scrolling to the absolute top) I want to mention that there is also a implementation on component level (scrollBy) which can be handy if you don't have to scroll the whole window.

Update

I must confess I never used scrollBy myself so if it don't work out for you (the linked API should provide you with all infomration) I recommend you to use scrollTo() instead. Here's a working JSFiddle

Use it on Panel like

panel.getEl().scrollTo('Top', 0, true);
// or
panel.body.scrollTo('Top', 0, true); // this property is protected
// or 
panel.getTargetEl().scrollTo('Top', 0, true); // this method is private and may be changed

and on a Treepanel or Gridpanel like

panel.getView().getEl().scrollTo('Top', 0, true);
sra
  • 23,629
  • 7
  • 52
  • 88
  • Thanx for reply...Actually i have all my views as panel. So "window.scrollTo(0,0)" is not working. So how to implement this in case of panel? – user1722857 Jun 03 '13 at 06:09
  • As per you told mam, i have written code as- " panel=Ext.getCmp('qbqnsId'); panel.getEl().scrollTo('Top', 0, true);" and i have this panel view code as-"Ext.define('Balaee.view.qb.qbqns.Qbqns', { extend : 'Ext.form.Panel', requires : [ 'Balaee.view.qb.qbqns.QbqnsView' ], id : 'qbqnsId', alias : 'widget.Qbqns', title : 'Qbqns', autoScroll : true, items : [ { xtype : 'QbqnsView' }], buttons : [ { xtype : 'button', fieldLabel : 'Vote', action : 'voteAction', formBind : true, text : 'submit'}]});" But its not working. – user1722857 Jun 03 '13 at 09:02
  • @user1722857 Use `body` [Demo](http://jsfiddle.net/sran/jKFhD/) instead of `getEl()` or the private method `getTargetEl()` – sra Jun 03 '13 at 09:19
  • Thanx for helping me..Actually i tried as per you told. i modified my view as-"Ext.define('Balaee.view.qb.qbqns.Qbqns', { extend : 'Ext.form.Panel', requires : [ 'Balaee.view.qb.qbqns.QbqnsView' ], id : 'qbqnsId', alias : 'widget.Qbqns', title : 'Qbqns', autoScroll: true, items : [ { xtype : 'QbqnsView' } ], buttons : [ { xtype : 'button', fieldLabel : 'Vote', action : 'voteAction', name : 'vote', formBind : true, text : 'submit' handler: function(btn) { btn.up('panel').body.scrollTo('Top', 0, true) }; } ] });" But still its not working. – user1722857 Jun 03 '13 at 12:21
  • @user1722857 I extended your tags a bit. Well might be getting the wrong panel! You are extending a form so you should try to call btn.up('form') or better btn.up('Qbqns'). btw. the convention for xtype is lowercase. – sra Jun 03 '13 at 16:01
2

Use window.scrollTo(0,0) in your click handler.

rixo
  • 18,198
  • 3
  • 35
  • 50