How to save scroll position on an extjs form?

Question

I have a long form with comboboxes and buttons that add element to the form. Every time combobox's value gets upldated or elements get added, it scrolls up to the top of the form. I want the scrollbar to retain its position. I tried saving current scroll position by doing

     this.myForm.getScrollPosition();

But I get getScrollPosition is not a function error.

Any help on this?

why does your form scroll up to the top when you update a combo box? Mine doesn't. — dbrin, Jul 24 '13 at 16:19
Hi Dbrin, it's not just the combobox, even when I add a record to a grid inside the form, after adding, it goes on the top. For now I'd just like to save the current scroll position. How can I do that? — EagleFox, Jul 24 '13 at 16:34
grid issue can be controlled there is a property for grids for that, i am not sure why it would affect your form though. See this answer here: http://stackoverflow.com/questions/13088506/extjs-grid-panel-store-keep-scrollbar-position-after-load-reload/13149058#13149058 — dbrin, Jul 24 '13 at 17:31

score 4 · Accepted Answer · edited Feb 04 '17 at 00:31

If you are using extjs there is a way to manipulate the scroll using the Ext.dom.Element class, each component in Extjs inherits from it, then if you add a new component that modifies the height or width of your form, you can first get the height and width of that component using:

var newcompwidth = comboboxexample.getWidth();
var newcompheight = comboboxeample.getHeight();

Later you can modify the scroll value using scrollTo method like this:

myformcontainer.getEl().scrollTo('Top',myformcontainer.getEl().getScroll().top - newcompheight);

myformcontainer.getEl().scrollTo('Top',myformcontainer.getEl().getScroll().left - newcompwidth);

there are other methods like scrollBy or scroll but I didn't test it yet, I guess this will help you.

the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.dom.Element

How to save scroll position on an extjs form?

1 Answers1