Sencha Touch 2.1：表單面板鍵盤在Android上隱藏活動文本框

Question

當我點擊屏幕底部的文本框時，鍵盤出現並隱藏活動元素。在iOS上，它非常完美。

我可以滾動窗體，所以文本框位於可見區域，但這根本不好。我做錯了什麼或者這是一個已知的錯誤，因爲我在Sencha Touch本身的示例中具有相同的行爲：docs.sencha.com/touch/2-1/touch-build/examples/forms/

If這種形式：

我在「生物」的文本框敲擊，鍵盤隱藏文本框，而不是滾動文本框最多有它明顯的同時鍵入：

Answer 1

這是defi一個已知的問題，我在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); 
     } 
    } 
}, 

這對我有用。如果您需要任何幫助來實現這一點，請告訴我！

Answer 2

您可以訂閱在鍵盤的顯示/隱藏事件和補償輸入的偏移。它已經在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); 
      } 
     }) 
    })(); 
} 

Answer 3

侵擾程度較低的解決方案：

在應用程序啓動方法中添加以下行：

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 
} 

這個工作在許多情況下，我一直在測試上就好了。科爾多瓦和Chrome的實施。在Cordova/Phonegap應用程序的情況下，您只需要注意全屏設置爲false。 （測試在科爾多瓦3.5）

Answer 4

「Ext.Viewport.on（'畫'' - 解決方案給我滾動的問題。整個頁面不能在方向更改後滾動，因爲視口高度然後會大於窗口高度。 （Ext.Viewport.getHeight（）將不會是相同的方向變化後Ext.Viewport.getWindowHeight（）。）

周圍製造使用overidden輸入工作：

創建文件app /覆蓋/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'] 

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