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

时间:2012-01-09 20:26:05

标签: javascript datepicker sencha-touch

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

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

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

视图扩展了Ext.Panel(因此标题),我在调整resize事件时尝试使用doLayout和doComponentLayout方法,但是,似乎都不起作用。

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

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

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

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

  • 保存容器面板的高度(必须更新onorientationchange)
  • 当调用选择器时(您需要确定要收听的选择器事件,beforeaddbeforerenderbeforeshow),您确认高度不低或者其他你取消了拣货员的行动。
  • 设置一个间隔以在几毫秒后验证它,直到高度恢复并且下边距正确。

您可能还希望在容器面板上发生orientationchange时取消显示选择器以避免进一步的问题。

请注意,这是假设面板的高度或视口使用显示的键盘更改其高度,如果不是,您应该注意可能更改的任何属性,或者甚至将一个布尔变量添加到onresize事件以进行验证在显示选择器之前。