Question

我有一个可以水平滚动的长tabBar，我想让选中的标签在最左边对齐。例如，如果我选择选项卡的中间，它应该在最左侧可见。我有下一个和上一个按钮来选择下一个和上一个选项卡。因此，如果现在通过单击“上一步”按钮选择了“最左侧”选项卡右侧的任何选项卡，则应该在最左侧显示该选项卡。总的来说，我希望所选标签在最左侧可见。

非常感谢任何帮助。

Answer 1

如果您有固定大小的tabButtons，则最简单。这样你就可以计算你有多少滚动到一边。一个好的开始是设置tabBar.setScrollable（{direction：'horizontal'}）。

但无论如何。这对于手机或平板电脑来说似乎很糟糕。你应该提出另一个想法。

Answer 2

我解决了这个问题并在tabpanel的activeitemchange中获得了一个解决方案的小技巧

TabPanelActiveItemChange：function（container，value，oldValue，eOpts）{

        var count = container.innerItems.length;
        var currentIndex = Ext.Array.indexOf(container.innerItems, value);
        var tabBar = container.getTabBar();
        // to keep the selected item in left or visible in smaller width screen.
        var totalWidth = container.innerItems[count - 1].tab.element.getX() - container.innerItems[0].tab.element.getX() + container.innerItems[count - 1].tab.element.getWidth();
        if (totalWidth > window.innerWidth) {
            var widthToScroll = container.innerItems[currentIndex].tab.element.getX() - container.innerItems[0].tab.element.getX();
            var scroller = tabBar.getScrollable().getScroller();
            scroller.scrollTo(widthToScroll, 0, true);
        }

滚动选项卡面板的选项卡栏

2 个答案: