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

如何在面板内滚动？

1 个答案: