代码之家 › 专栏 › 技术社区 › Devmix

如何在面板内滚动?

extjs5 extjs javascript

Devmix · 技术社区 · 6 年前

我正试图根据选定的选项在面板内滚动。

比如说:

如果用户选择 剖面图-1 然后我想向下滚动到 剖面图-1 在面板内部
如果用户选择 剖面图-2 然后我想向下滚动到 剖面图-2 等等。我想用 滚动到 方法,但我被卡住了,因为值100需要根据用户的选择进行更改。有人知道怎么做吗?提前多谢!

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

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

注: -如果用户选择第3部分,则向下滚动到面板3并在顶部显示。请看附图。

1 回复 | 直到 6 年前

Evan Trimboli 6 年前

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