画面下部のテキストフィールドをタップすると、キーボードが表示され、アクティブな要素が非表示になります。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とChromeの両方の実装。Cordova / Phonegapアプリの場合、フルスクリーンがfalseに設定されていることに注意する必要があります。（Cordova 3.5でテスト済み）
"Ext.Viewport.on（'painted'"-ソリューションでスクロールの問題が発生しました。ビューポートの高さがウィンドウの高さよりも大きくなるため、向きを変更した後、ページ全体をスクロールできませんでした。（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']
キーボードの表示/非表示イベントをサブスクライブして、入力のオフセットを補正することができます。Android 4.2および4.4（HTCOneおよびNexus7）でテストされています。
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);
}
}
}