2

我正在使用 Ext JS v4.2.1 在 Screen 中绘制一个选项卡面板，并在每个选项卡中显示一些内容——这些内容可能会变得非常大。为此，我使用这样的东西：

var createTab = function (tabName, panelName){
                    return {xtype: 'container',
                            title: tabName,
                            autoScroll: true,
                            layout: {
                                type: 'vbox',
                                align: 'stretch'
                            },
                            items: [
                                {
                                    title: panelName,
                                    items: [Ext.create( 'MyLongView' )]
                                }
                            ]};
            };

var tabPanel = new Ext.tab.Panel({
            renderTo: 'testDiv',
            flex: 1,
            border: false,
            itemId: 'tabPanel',
            items: [createTab('First Tab', 'First Panel'),
                    createTab('Second Tab', 'Second Panel')]
        });

当我在 Internet Explorer 中尝试该代码时，每个 Tab Change 都会将滚动位置重置为 top，这是一个在 Chrome 或 Firefox 中都不会发生的错误。要重现它，请在 IE 窗口中执行以下步骤：

  1. 创建一个选项卡面板，其中包含选项卡。
  2. 在第一个选项卡中，向下滚动到底部。
  3. 然后，选择第二个选项卡。
  4. 最后，返回第一个选项卡。您会看到您留在底部的滚动条现在位于顶部。

预期的行为是滚动停留在您离开它的位置。通过 Sencha 论坛搜索，我发现他们建议使用，hideMode: 'offsets'但这对我不起作用。有任何想法吗？

PS：我创建了一个 Fiddle 来显示错误。请只在 IE 上尝试（我不知道为什么它在 Chrome/Firefox 上不起作用）。

4

0 回答 0