sencha touch form field 随键盘弹而自适应

解决Sencha Touch 2.1表单中键盘遮挡问题

最新推荐文章于 2025-07-12 10:57:21 发布

原创最新推荐文章于 2025-07-12 10:57:21 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sencha touch

sencha 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在使用Sencha Touch 2.1时，通过设置焦点事件，自动调整field的展示位置，解决键盘展开时遮挡表单字段的问题，提升用户体验。

使用sencha touch form里的field的组件，我们都会遇到这种情况，当一个表单中的field过多时，会向下撑满整个屏幕，这是如果点击靠屏幕下方的field组件，那么弹出的系统输入法会把form字段给遮挡住，这种用户体验非常不好。如果能在输入框展开时，自动调整field的展示位置就好了。

使用如下配置：

{
    xtype: 'textareafield',
    name: 'bio',
    label: 'Bio',
    maxRows: 10,
    listeners: {
        focus: function(comp, e, eopts) {
            var ost = comp.element.dom.offsetTop;
            this.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost);
        }
    }
}

注意focus事件里的“this.getParent().getParent()”完成的功能是找到父级容器的form层，这个可以根据自己代码层级做调整。

原文摘自：http://stackoverflow.com/questions/15596111/sencha-touch-2-1-form-panel-keyboard-hides-active-textfield-on-android