Sencha Touch 1.1, PhoneGap 1.2, problème de défilement des zones de texte/champs de texte sur Android

Question

J'ai passé beaucoup de temps à faire des recherches sur ce problème et encore plus de temps à essayer de le résoudre. J'espère que quelqu'un connaît une bonne solution à ce problème. Le problème concerne Sencha Touch 1.1, PhoneGap 1.2 et Android. J'ai commencé le projet il y a quelques mois et j'ai rencontré un problème de glissement des panneaux vers le haut lorsqu'une zone de texte ou un champ de texte reçoit le focus et lorsqu'une entrée au clavier est reçue alors que l'entrée a le focus.

J'ai lu plusieurs autres fils de discussion de stack overflow et du forum sencha qui décrivent des variations du même problème. La solution habituelle consiste à définir Android:windowSoftInputMode sur adjustPan au lieu de adjustResize. Cela élimine le problème du glissement du panneau vers le haut mais n'est pas acceptable dans mon cas car l'un des panneaux de l'application est une fenêtre de chat. Le champ de saisie doit toujours rester ancré contre la zone inférieure visible de l'écran. Par exemple, il doit rester ancré au bas de l'écran lorsqu'aucun clavier souple n'est visible et il doit rester ancré juste au-dessus du clavier souple lorsque celui-ci est sorti. J'y parviens si je redimensionne le panneau à la hauteur du viewport lorsque Ext.EventManager.onWindowResize est appelé (en utilisant Android:windowSoftInputMode=adjustResize). Le problème est que toute saisie au clavier entraîne le glissement de l'ensemble du panneau vers le haut. Une solution très bricolée et finalement inacceptable a été d'écouter les événements de touche et de faire glisser manuellement le panneau vers 0,0 en définissant sa position et en appelant window.scrollTo(0,0). Cela permet de remettre le panneau en place, mais l'expérience utilisateur est médiocre (l'écran rebondit de haut en bas à chaque lettre saisie).

L'utilisation de Android:windowSoftInputMode=adjustPan ne provoque aucun déplacement du panneau, mais ne fournit aucun moyen d'obtenir la hauteur du clavier programmable afin de positionner correctement le champ de saisie du chat directement au-dessus du clavier programmable (aucun à ma connaissance).

Question 1 : Existe-t-il un moyen de déterminer par programmation la hauteur d'un clavier souple sans utiliser Android:windowSoftInputMode=adjustResize et écouter l'événement Ext.EventManager.onWindowResize pour lire la taille de la fenêtre redimensionnée ?

Question 2 : existe-t-il un moyen d'utiliser Android:windowSoftInputMode=adjustResize et d'empêcher le navigateur de glisser vers le haut lorsqu'un champ de texte ou une zone de texte reçoit le focus ?

Merci d'avance pour toute aide. Cela a pris plus de 30 heures de temps et c'est pratiquement un coup d'arrêt pour cette application qui est maintenant en développement depuis plusieurs mois.

-Sean

Answer 1

Je souffre du même problème avec Sencha Touch 1.1 et PhoneGap 1.2 ; j'ai une mise en page de carte avec des barres d'outils ancrées en haut et en bas, la barre d'outils inférieure contient un champ de texte qui devrait rester ancré en bas de la fenêtre et ne pas être recouvert par le clavier virtuel, à la manière de l'application Messages d'iOS.

Je pense (il dit provisoirement) que le réglage android:windowSoftInputMode=adjustResize et l'ajout d'un onWindowResize qui effectue manuellement le redimensionnement du composant devrait régler le problème :

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

Le site …getActiveItem().fireEvent('resize') appelle simplement un resize l'auditeur dans la carte actuelle dans laquelle il y a une certaine peinture manuelle de la barre d'outils inférieure.

J'espère que cela vous aidera.

EDIT : "Ext.EventManager" -- Cet objet a été déprécié dans Sencha Touch 2.0.0. Veuillez vous référer à la documentation de la méthode pour des alternatives spécifiques.

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