javascript - Sencha 触摸面板/日期选择器渲染问题

Question

我正在维护 Sencha Touch 1.1 应用程序，并尝试解决我们在 Android 平板电脑(特别是 Samsung Galaxy Tab S、Android 3.1)上注意到的问题。

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

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

View 扩展了 Ext.Panel(因此标题)，我尝试在发生调整大小事件时使用 doLayout 和 doComponentLayout 方法，但是似乎都不起作用。

有什么想法吗？

Answer 1

这很难，并且与由于隐藏键盘的动画而未完全恢复容器高度有关。

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

如果是的话，我想到了一个棘手的解决方法:

• 保存容器面板的高度(必须在orientationchange时更新)
• 当调用选择器时(您需要确定要监听哪个选择器事件，beforeadd、beforerender 或 beforeshow)验证高度不低于，否则您将取消选取器操作。
• 设置一个时间间隔，在几毫秒后进行验证，直到高度恢复且下边距正确。

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

请注意，这是假设面板的高度或视口(viewport)随显示的键盘改变其高度，如果没有，您应该留意可能更改的任何属性，甚至向 onresize 事件添加一个 bool 变量以进行验证在显示选择器之前。