Sencha Touch 2.1: панель форм Панель скрывает активное текстовое поле на Android

Когда я нажимаю текстовое поле в нижней части экрана, появляется клавиатура и скрывает активный элемент. На iOS он отлично работает.

Я могу прокручивать форму, поэтому текстовое поле находится в видимой области, но это совсем не приятно. Я делаю что-то неправильно или это известная ошибка, так как у меня такое же поведение в этом примере от самого Sencha Touch: docs.sencha.com/touch/2-1/touch-build/examples/forms/

Если на этой форме:

Я нажимаю текстовое поле "Bio", клавиатура скрывает текстовое поле, а не прокручивает текстовое поле, чтобы оно было видимым при наборе текста:

Ответ 1

Это окончательно известная проблема, я много раз это видел на Android. Единственное, что вы можете попытаться сделать, это прослушивать событие фокусировки в поле ввода, а затем прокручивать элемент. Возможно, вам придется поиграть с правильным значением Y, которое лучше всего подходит для вашей ситуации.

{
    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);
        }
    }
},

Это работает для меня. Если вам нужна помощь в этом, дайте мне знать!

Ответ 2

Менее интрузивное решение:

по методу запуска приложения добавьте следующие строки:

launch: function() {
    if (Ext.os.is.Android) { //maybe target more specific android versions.
        Ext.Viewport.on('painted', function() {
            Ext.Viewport.setHeight(window.innerHeight);
        });
    }
    // ... rest of the launch method here
}

Это очень хорошо работает во многих случаях, на которых я тестировал. Реализация Кордовы и Хром. Вам просто нужно позаботиться, в случае приложения Cordova/Phonegap, что для полноэкранного режима установлено значение false. (Протестировано на Кордове 3.5)

Ответ 3

"Ext.Viewport.on(" раскрашенное "решение помогло мне прокрутить страницу). Нельзя прокручивать всю страницу после изменения ориентации, потому что высота окна просмотра будет больше высоты окна. (Ext.Viewport.getHeight() не будет таким же, как Ext.Viewport.getWindowHeight() после изменения ориентации.)

Сделал работу с использованием скрытого ввода:

Создать файл app/overrides/field/Input.js

Ext.define('myApp.overrides.field.Input', {
  override: 'Ext.field.Input',

  initialize: function() {
    var me = this;

    // Solves problem that screen keyboard hides current textfield
    if (Ext.os.is.Android) {
        this.element.on({
            scope      : this,
            tap        : 'onTap',
        });
    }

    me.callParent();
  },

  onResize: function(input) {
    var me = input;
    //if input is not within window
    //defer so that resize is finished before scroll
    if(me.element.getY() + me.element.getHeight() > window.innerHeight) {
        Ext.Function.defer(function() {
            me.element.dom.scrollIntoView(false);
        }, 100);
    }
  },

  // Solves problem that screen keyboard hides current textfield in e.g. MyTimeRowForm
  //old solution with Viewport.on('painted', gave scroll problem when changeing orientation
  onTap: function(e) {
    me = this;
    window.addEventListener( "resize", function resizeWindow () {
        me.onResize(me);
        window.removeEventListener( "resize", resizeWindow, true );
    }, true );
  },   
});

И добавьте его в app.js

requires: ['myApp.overrides.field.Input']

Ответ 4

Вы можете подписаться на шоу/скрыть события клавиатуры и компенсировать смещение ввода. Он был протестирован на Android 4.2 и 4.4 (HTC One и Nexus 7).

if (Ext.os.is.Android4 && Ext.os.version.getMinor() >= 2) {
    (function() {
        var inputEl = null;
        var onKeyboardShow = function() {
            setTimeout(function() {
                if (!inputEl) {
                    return;
                }
                var currentClientHeight = window.document.body.clientHeight;
                var elRect = inputEl.getBoundingClientRect();
                var elOffset = elRect.top + elRect.height;
                if (elOffset <= currentClientHeight) {
                    return;
                }
                var offset = currentClientHeight - elOffset;
                setOffset(offset);
            }, 100);
        };
        var onKeyboardHide = function() {
            setOffset(0);
        };
        var setOffset = function(offset) {
            var el = Ext.Viewport.innerElement.dom.childNodes[0];
            if (el) {
                el.style.setProperty('top', offset + 'px');
            }
        };
        document.addEventListener('deviceready', function() {
            document.addEventListener("hidekeyboard", onKeyboardHide, false);
            document.addEventListener("showkeyboard", onKeyboardShow, false);
        }, false);
        Ext.define('Ext.field.Input.override', {
            override: 'Ext.field.Input',
            onFocus: function(e){
                inputEl = e.target;
                this.callParent(arguments);
            },
            onBlur: function(e){
                inputEl = null;
                this.callParent(arguments);
            }
        })
    })();
}

Ответ 5

Это сработало лучше для меня

{
   xtype: 'passwordfield',
   name: 'pass',
   listeners: {
      focus: function (comp, e, eopts) {
        var contr = this;
        setTimeout(function () {
          if (Ext.os.is('Android')) {
            var ost = comp.element.dom.offsetTop;
            contr.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost, true);
          }
        }, 400);
      }
   }
}