[Phonegap+Sencha Touch] 移动开发68 Sencha Touch弹出键盘挡住输入框的解决办法

原文地址：http://blog.csdn.net/lovelyelfpop/article/details/49679331

现象：

sencha touch有一个缺点：当formPanel里的输入框控件较多的时候，软键盘弹出后会挡住正在输入的控件。如下图：

（更清楚的画面请看视频：http://video.weibo.com/show?fid=1034:4c31fd16a546276f392af6517462b856）

解决办法：

在输入框聚焦和界面resize的时候，都自动将被聚焦的输入框滚动到可见位置。

Ext.define('UX.viewport.FieldScroller', {
    override: 'Ext.viewport.Default',

    onElementFocus: function() {
        this.callParent(arguments);

        this.scrollFocusedFieldIntoView();
    },

    scrollFocusedFieldIntoView: function() {
        var me = this,
            focusedDom = me.focusedElement,
            fieldEl = focusedDom && Ext.fly(focusedDom).up('.x-field'),
            fieldId = fieldEl && fieldEl.id,
            fieldCmp = fieldId && Ext.getCmp(fieldId),
            offsetTop = 0,
            scrollingContainer, scroller, scrollerEl, domCursor, thresholdY, containerHeight;

        if (!fieldCmp) {
            return;
        }

        scrollingContainer = fieldCmp.up('{getScrollable()}');

        if (scrollingContainer) {
            scroller = scrollingContainer.getScrollable().getScroller();
            scrollerEl = scroller.getElement();
            domCursor = focusedDom;

            while (domCursor && domCursor !== scrollerEl.dom) {
                offsetTop += domCursor.offsetTop;
                domCursor = domCursor.offsetParent;
            }

            containerHeight = scroller.getContainerSize().y;
            thresholdY = offsetTop + fieldEl.getHeight() + (me.config.fieldFocusPadding || 40);
            // console.log('offsetTop=%o, containerHeight=%o, thresholdY=%o', offsetTop, containerHeight, thresholdY);

            if (scroller.position.y + containerHeight < thresholdY) {
                // console.log('scrolling to ', thresholdY - containerHeight);
                scroller.scrollTo(0, thresholdY - containerHeight, true);
            }
        }
    }
}, function() {
    Ext.onSetup(function() {
        Ext.Viewport.on('resize', 'scrollFocusedFieldIntoView');
    });
});

（代码来自github：https://github.com/JarvusInnovations/jarvus-touch-fieldscroller）

使用方法：

将上面的代码保存为文件"FieldScroller.js"，位置和命名空间自己改，记得requires。其实就是第三方扩展类的引入。

当然你可以可以按照github上面的，给sencha app添加这个packages，然后在app.json的requires节点加上package名字

下面是效果：

（更清楚的画面请看视频：http://video.weibo.com/show?fid=1034:edcf3db9e9cdada72ace71924c3fdfcb）

ExtJs 6 Modern 请使用下面的代码：

//在输入框聚焦和界面resize的时候，都自动将被聚焦的输入框滚动到可见位置
Ext.define('UX.overrides.viewport.Default', {
    override: 'Ext.viewport.Default',

    onElementFocus: function() {
        this.callParent(arguments);

        this.scrollFocusedFieldIntoView();
    },

    scrollFocusedFieldIntoView: function() {
        var me = this,
            focusedDom = me.focusedElement,
            fieldEl = focusedDom && Ext.fly(focusedDom).up('.x-field'),
            fieldId = fieldEl && fieldEl.id,
            fieldCmp = fieldId && Ext.getCmp(fieldId),
            offsetTop = 0,
            scrollingContainer, scroller, scrollerEl, domCursor, thresholdY, containerHeight;
        
        //if (!fieldCmp || ((fieldCmp.isXType('richtextareafield') || fieldCmp.isXType('simpletextareafield')) && fieldCmp.element.hasCls('cmtbar-field'))) {
        if (!fieldCmp) {
            return;
        }

        scrollingContainer = fieldCmp.up('{getScrollable()}');

        if (scrollingContainer) {
            scroller = scrollingContainer.getScrollable();
            scrollerEl = scroller.getElement();
            domCursor = focusedDom;

            while (domCursor && domCursor !== scrollerEl.dom) {
                offsetTop += domCursor.offsetTop;
                domCursor = domCursor.offsetParent;
            }

            containerHeight = scroller.getElement().getHeight();
            thresholdY = offsetTop + Math.min(fieldEl.getHeight(), 40) + (me.config.fieldFocusPadding || 40);
            // console.log('offsetTop=%o, containerHeight=%o, thresholdY=%o', offsetTop, containerHeight, thresholdY);

            if (scroller.position.y + containerHeight < thresholdY) {
                // console.log('scrolling to ', thresholdY - containerHeight);
                scroller.scrollTo(0, thresholdY - containerHeight, true);
            }
        }
    },

    onAppLaunch: function(){
        this.callParent(arguments);
        Ext.Viewport.on('resize', 'scrollFocusedFieldIntoView');
    }
});

欢迎加入Sencha Touch + Phonegap交流群

1群：194182999 (满)

2群：419834979

共同学习交流（博主QQ：479858761）