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

iteye_13470

于 2015-05-29 14:48:03 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

分类专栏： sencha 文章标签： sencha touch

本文链接：https://blog.youkuaiyun.com/iteye_13470/article/details/82635375

sencha 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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