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

Sencha Touch panel/date picker rendering issue

本文关键字：选择器问题日期触摸 Sencha 更新时间：2023-09-26

我正在维护Sencha Touch 1.1应用程序，我正在努力解决我们在安卓平板电脑（特别是三星Galaxy Tab S、安卓3.1）上注意到的问题。

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

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

该视图扩展了Ext.Panel（因此得名），我曾尝试在发生调整大小事件时使用doLayout和doComponentLayout方法，但两者似乎都不起作用。

有什么想法吗？

这很难，因为隐藏键盘的动画导致容器高度没有完全恢复。

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

如果是这样的话，我脑海中浮现出一个棘手的解决方案：

保存容器面板的高度（必须在rientationchange上更新）
调用选取器时（您需要确定要侦听哪个选取器事件，beforeadd、beforerender或beforeshow），验证高度是否不低，否则取消选取器操作
设置一个间隔以在几毫秒后进行验证，直到高度恢复并且下边距正确为止

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

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