How to scroll inside a panel?

Question

I'm trying to scroll inside a panel based on a selected option.

Let's say:

• If the user selects Section-1 then I want to scroll down to Section-1 inside the panel

• If the user selects Section-2 then I want to scroll down to Section-2 and so on. I'm trying to use the scrollTo method but I'm stuck because the value 100 will need to change based on user's selection. Does anyone know how to make this work? Thanks a lot in advance!

cmp.scrollTo('top', 100, true);

Here's LIVE DEMO

var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,  // Don't want content to crunch against the borders
width: 300,
height: 400,
autoScroll: true,
title: 'Sections',
items: [{
    xtype: 'panel',
    height: 100,
    html: 'Section-1',
    style: {
   borderColor: 'black',
   borderStyle: 'solid',
    },
}......
.......

NOTE: - If the user selects Section 3 then scroll down to Panel 3 and show it on the top. Please, see attached picture.

Answer 1

Use scrollIntoView:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        // The data store containing the list of states
        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data: [{
                "abbr": "section1",
                "name": "Section-1"
            }, {
                "abbr": "section2",
                "name": "Section-2"
            }, {
                "abbr": "section3",
                "name": "Section-3"
            }, {
                "abbr": "section4",
                "name": "Section-4"
            }, {
                "abbr": "section5",
                "name": "Section-5"
            }, {
                "abbr": "section6",
                "name": "Section-6"
            }, {
                "abbr": "section7",
                "name": "Section-7"
            }]
        });

        // Create the combo box, attached to the states data store
        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose Section',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            renderTo: Ext.getBody(),
            listeners: {
                change: function(field, v) {
                    var toScroll = filterPanel.getComponent(v);


                    var s = filterPanel.getScrollable();
                    s.scrollIntoView(toScroll.el);
                }
            }
        });

        var filterPanel = Ext.create('Ext.panel.Panel', {
            bodyPadding: 5, // Don't want content to crunch against the borders
            width: 300,
            height: 400,
            autoScroll: true,
            title: 'Sections',
            items: Array(7).fill(null).map((_, i) => ({
                xtype: 'panel',
                height: 100,
                itemId: 'section' + (i + 1),
                html: 'Section' + (i + 1),
                style: {
                    borderColor: 'black',
                    borderStyle: 'solid',
                },
            })),
            renderTo: Ext.getBody()
        });
    }
});