Sencha Touch 1.1, PhoneGap 1.2, проблема с прокруткой текстовой области Android / текстового поля

Question

Я потратил много времени на изучение этой проблемы и даже больше времени, пытаясь ее решить. Я надеюсь, что кто-то там знает хорошее решение для этого. Проблема касается Sencha Touch 1.1, PhoneGap 1.2 и Android. Я нахожусь в проекте несколько месяцев и столкнулся с проблемой смещения панелей вверх, когда текстовая область или текстовое поле получает фокус и когда ввод с программной клавиатуры принимается, когда ввод имеет фокус.

Я прочитал несколько других тем на стеке и форумах sencha, в которых описываются варианты той же проблемы. Обычное решение заключается в том, чтобы установить android: windowSoftInputMode для AdjustPan вместо AdjustResize. Это избавляет от проблемы с тем, что панель поднимается, но в моем случае это неприемлемо, потому что одна из панелей в приложении - это окно чата. Поле ввода всегда должно быть пристыковано к нижней видимой области на экране. Например, он должен оставаться пристыкованным к нижней части экрана, когда программная клавиатура не видна, и он должен оставаться пристыкованным чуть выше программной клавиатуры, когда клавиатура отсутствует. Я могу сделать это, если изменить размер панели до высоты области просмотра, когда вызывается Ext.EventManager.onWindowResize (с помощью android: windowSoftInputMode = AdjustResize). Проблема в том, что при любом вводе с клавиатуры вся панель сдвигается вверх. Очень хакерским и в конечном итоге неприемлемым решением было прослушивание ключевых событий, а затем вручную сдвинуть панель обратно до 0,0, установив ее положение и также вызвав window.scrollTo (0,0). Это приводит к тому, что панель возвращается на свое место, но это плохо для пользователя (экран отскакивает вверх и вниз при каждом вводе букв).

Использование android: windowSoftInputMode = AdjustPan не вызывает какого-либо смещения панели, но не предоставляет никаких средств для получения высоты программной клавиатуры, чтобы я мог правильно расположить поле ввода чата непосредственно над программной клавиатурой (о чем я не знаю в любом случае) ).

Вопрос 1. Есть ли способ программно определить высоту программной клавиатуры без использования android: windowSoftInputMode = AdjustResize и прослушивание события Ext.EventManager.onWindowResize для считывания размера области просмотра с измененным размером?

Вопрос 2: Есть ли способ использовать Android: windowSoftInputMode = AdjustResize и не допустить скольжения браузера, когда текстовое поле или текстовая область получает фокус?

Заранее спасибо за любую помощь. Это заняло 30 с лишним часов времени и в значительной степени является пробным показом для этого приложения, которое сейчас находится в разработке несколько месяцев.

-Sean

Answer 1

У меня такая же проблема с Sencha Touch 1.1 и PhoneGap 1.2;У меня есть макет карты с панелями инструментов, прикрепленными сверху и снизу, нижняя панель инструментов содержит текстовое поле, которое должно оставаться прикрепленным к нижней части окна просмотра и не закрываться программной клавиатурой, как приложение «Сообщения iOS».

Я думаю (он говорит неуверенно), что установка android:windowSoftInputMode=adjustResize и добавление обработчика событий onWindowResize, который вручную изменяет размер компонента, должны исправить положение:

if (Ext.is.Android) {
  Ext.EventManager.onWindowResize(function() {
    Ext.Viewport.scrollToTop();
    Ext.Viewport.updateBodySize();
    Ext.Viewport.fireEvent('resize', Ext.Viewport, Ext.getBody().getSize());
    myapp.views.viewport.getActiveItem().fireEvent('resize');
  });
}

…getActiveItem().fireEvent('resize') просто вызывает resize слушатель в текущей карте, в которой есть некоторая ручная перекраска нижней панели инструментов.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: "Ext.EventManager" - Этот объект былне рекомендуется в Sencha Touch 2.0.0.Пожалуйста, обратитесь к документации метода для конкретных альтернатив.

Answer 2

Ext.define('MyApp.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
    var textAreaEl = textarea.getComponent().input;
    if (textAreaEl) {
        textAreaEl.dom.style.height = 'auto';
        textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
    }
}, 200, this),

constructor: function () {
    this.callParent(arguments);
    this.on({
        scope: this,
        keyup: function (textarea) {
            textarea.adjustHeight(textarea);
        },
        change: function (textarea, newValue) {
            textarea.adjustHeight(textarea);
        }
    });
}});