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

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

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

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

Введите описание изображения здесь

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

Введите описание изображения здесь

Это определенно известная проблема, которую я видел много раз на 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); } } }, 

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

Введите описание изображения здесь

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

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

 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)

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

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

Создать файл-приложение / переопределить / поле / 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 eg 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'] 

Вы можете подписаться на шоу / скрыть события клавиатуры и компенсировать смещение ввода. Он был протестирован на 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); } }) })(); } 

Мне было лучше для меня

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