从标签栏选择标签时，ExtJS 窗口跳到顶部答案

【问题标题】：ExtJS window jumps to the top when selecting a tab from a tab bar从标签栏选择标签时，ExtJS 窗口跳到顶部
【发布时间】：2017-10-13 15:54:30
【问题描述】：

关于 ExtJS 中的标签栏的简单问题。我已经构建了带有很多控件的窗口，最后在标签栏中的 6 个标签中的每个标签中都有一组控件。每个选项卡中的控件几乎相同，我不处理选项卡更改事件。但是，当我选择一个选项卡时，焦点会返回到对话框的顶部（在此过程中以公平的方式滚动），然后用户必须手动向下滚动到选项卡才能看到现在可见的控件。

更改选项卡会导致窗口刷新吗？如果是这样，有什么办法可以阻止这种情况发生？

我必须承认，这种情况仅限于我的两台计算机中的一台。我已经在 Azure 中安装了完整的应用程序，当我在 IE 或 Chrome 中从 machine1 运行它时，它工作正常。但是，如果我将 machine2 与相同版本的 IE 和 Chrome 一起使用，则会发生跳转和一些奇怪的事件。是否有一些与机器相关的值可能导致跳转？

谢谢

【问题讨论】：

标签： extjs

【解决方案1】：

只是为了让您知道，我通过进一步的挖掘发现了正在发生的事情。我的两台电脑的区别在于笔记本电脑有触摸屏。这会导致 ExtJS 添加特殊的滚动类来处理用户用手指在对话框的主体上滚动。

这给我带来了几个问题。首先，跳转到顶部是由切换活动选项卡后滚动条的重置引起的。重置功能没有做任何事情，包括将滚动设置回顶部。有趣的是，通过切换标签页会导致 96 个 scollers 被重置。我想不出为什么会这样，并怀疑它会导致完整的对话框刷新，而不仅仅是选项卡，我不明白为什么需要刷新。我正在寻找一种方法来阻止这种情况发生。

我在上面提到了其他一些问题。一个是第二个选项卡显示为空但带有滚动条。我们可以使用这些来查看正确的选项卡内容。我发现这是一个 Ext JS 错误。错误地，当 Ext JS 激活下一个选项卡时，它将选项卡放在滚动类之外（由 x-scroll-scroller 标记），而不是在其中。这导致它变得混乱。为了解决这个问题，我在 Ext.layout.container.Container 类的 getRenderTarget 函数中添加了一些代码。以前这只是

getRenderTarget: function() {
   return this.owner.getTargetEl();
}

我添加了一个特定的测试来查看第一个孩子是否是滚动条，如果是这种情况，则返回滚动条。

getRenderTarget: function() {
   var me = this.owner;
   if (me.body && me.body.dom.firstChild.className == 'x-scroll-scroller')
      return me.body.dom.firstChild;
   return me.getTargetEl();
}

选项卡控件的父级现在得到了正确维护，我在上面简要提到的其他奇怪的工件消失了。

所以目前的比赛状态。我正在寻找停止刷新的方法，当我找到它时会更新它，但触摸屏支持肯定是不稳定的。

仅供参考。我正在使用 Ext JS 6.1。

【讨论】：