cómo manejar el botón Atrás del dispositivo en la aplicación sencha touch

Question

En Sencha touch, si uso la vista de navegación puedo obtener el botón Atrás. Esto está bastante bien.

Pero, ¿qué ocurre si el usuario toca el botón de atrás del dispositivo? está saliendo directamente de la aplicación. En mi requerimiento, no debe salir de la aplicación para regresar a la pantalla anterior. ¿Cómo puedo hacer esto?

Answer 1

Se puede controlar el hardware botón de retroceso de esta manera:

if (Ext.os.is('Android')) { 
    document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false); 

    function onBackKeyDown(eve) { 

     eve.preventDefault(); 

     //do something 
     alert('back button pressed'); 

    } 
} 

Answer 2

No encontré las instrucciones en la página de soporte de historial útiles cuando intento hacer esto; De todos modos, no pude ver las rutas cuando se trata de una vista de navegación que puede tener una gran cantidad de vistas en él en cualquier momento.

Si solo desea que funcione el botón Atrás, puede usar las funciones popstate y pushstate (consulte https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history para obtener una referencia). La idea es que push un estado cuando se agrega una vista y pop cuando se elimina uno. El botón de retroceso físico en un teléfono Android, o el botón Atrás en un navegador de escritorio llama efectivamente al history.back(); así que todo lo que tiene que hacer es asegurarse de que presionar el botón Atrás en la barra de título haga lo mismo, y es eso lo que hace que la vista de navegación aparezca.

Para hacer un uso que funcione en Sencha Touch, añado lo siguiente al controlador principal:

en las referencias que tengo referencias al main vista (una instancia de Ext.navigation.View) y a su barra de título, desde el que puede engancharse en el caso de que el botón de retroceso por ejemplo:

refs: { 
     main: 'mainview', 
     mainTitleBar: 'mainview titlebar', 
}... 

adjunto las siguientes funciones a través del objeto control config ..

control: { 
     main: { 
      push: 'onMainPush' 
     }, 
     mainTitleBar: { 
      back: 'onBack' 
     }, 
     ... 

Estos se definen como:

onMainPush: function(view, item) { 
     //do what ever logic you need then.. 
     history.pushState(); 
    }, 
    onBack: function() { 
     history.back(); //will cause the onpopstate event to fire on window.. 
     //prevent back button popping main view directly.. 
     return false; 
    }, 

entonces hay que adjuntar una función que se ejecuta cuando el estado se extrae a través de la función init del ..

init: function() { 
    /* pop a view when the back button is pressed 
     note: if it's already at the root it's a noop */ 
    var that = this; 
    window.addEventListener('popstate', function() { 
     that.getMain().pop(); 
    }, false); 
}, 

Ahora, al pulsar de nuevo en la barra de título, ejecuta history.back() , esto a su vez desencadena el evento popstate que hace que aparezca la vista principal.

Si desea ver esto trabajando en una aplicación real, hay una aplicación de búsqueda de propiedades (v. Basic!) Usando esta técnica en github here.