Sencha 触控面板/日期选择器渲染问题

Question

我正在维护一个 Sencha Touch 1.1 应用程序，并试图解决我们在 Android 平板电脑（特别是三星 Galaxy Tab S、Android 3.1）上发现的一个问题。

出现的问题是登录表单上有两个字段：Sencha 文本字段和 Sencha 日期选择器字段。当用户使文本输入成为焦点，然后点击以聚焦日期选择器字段时，虚拟键盘将折叠，并且日期选择器显示在虚拟键盘结束的位置上方（大约在页面中间）。

请注意，当用户首先关注日期选择器字段时，不会发生这种情况；这让我相信这与 Sencha 没有正确处理在显示或隐藏键盘时引发的窗口调整大小事件有关，并且随后无法相应地重新计算包含视图对象的尺寸。

视图扩展了 Ext.Panel（因此得名），我尝试在 resize 事件发生时使用 doLayout 和 doComponentLayout 方法，但是似乎都不起作用。

有什么想法吗？

Answer 1

这很难，这与容器高度没有完全恢复有关，因为动画隐藏了键盘。

首先，您可以尝试在显示选择器之前添加一个较长的延迟 1-2 秒，以确认这是问题所在。

如果是这样，我想到了一个棘手的解决方法：

• 保存容器面板的高度（必须在方向更改时更新）
• 当调用拾取器时（您需要弄清楚要收听的选择器事件，beforerender或beforeshow）您验证了高度是否低否则，否则您取消了选择器操作。
• 设置一个间隔以在几毫秒后验证它，直到高度恢复并且下边距正确。

您可能还想在容器面板上发生方向更改时取消显示选择器以避免进一步的问题。

请注意，这是假设面板的高度或视口会随着显示的键盘更改其高度，否则您应该注意可能更改的任何属性，甚至向 onresize 事件添加一个布尔变量以进行验证在显示选择器之前。