如何在面板内滚动？

Question

我正在尝试根据所选选项在面板内滚动。

假设：

如果用户选择 Section-1 那么我想向下滚动到面板内的 Section-1
如果用户选择 Section-2 那么我想向下滚动到 Section-2 等等.我正在尝试使用 scrollTo 方法，但我卡住了，因为值 100 需要根据用户的选择进行更改。有谁知道如何使这项工作？非常感谢！

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

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',
    },
}......
.......

注意： - 如果用户选择第 3 节，则向下滚动到面板 3 并将其显示在顶部。请看附图。

Answer 1

使用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()
        });
    }
});

如何在面板内滚动？

How to scroll inside a panel?

javascript

extjs

extjs5