Skip to content Skip to sidebar Skip to footer

How To Scroll To The End Of The Form In ExtJS

I have a form with autoScroll feature. How can I scroll to the bottom of the form when I add a new item to it? height: 200, autoScroll: true, Here is my sample code

Solution 1:

If the field is added at the end of the form then the following solution might help:

EXTJS 5 & 6

http://docs.sencha.com/extjs/5.1.0/api/Ext.form.Panel.html#cfg-scrollable

In the form config:

scrollable: true,

In button handler:

{
                xtype: 'button',
                itemId: 'addChildBtn',
                disabled: false,
                text: 'Clone fieldset',
                 handler: function () {
                // Clone field set 
                  var set = Ext.getCmp('s1');         
                 var s = set.cloneConfig();
                form.add(s);
                this.up('form').getScrollable().scrollTo(0, 9999);
                }
            }

EXTJS 4

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.Panel-method-scrollBy

In button handler:

{
                xtype: 'button',
                itemId: 'addChildBtn',
                disabled: false,
                text: 'Clone fieldset',
                 handler: function () {
                // Clone field set 
                  var set = Ext.getCmp('s1');         
                 var s = set.cloneConfig();
                form.add(s);
                this.up('form').scrollBy(0, 9999, true);
                }
            }

Post a Comment for "How To Scroll To The End Of The Form In ExtJS"