come gestire il pulsante back del dispositivo sull'applicazione sencha touch

Question

In Sencha touch se uso la visualizzazione di navigazione posso tornare indietro. Questo è abbastanza bene.

Ma cosa succede se il dispositivo utente colpisce il pulsante? sta uscendo direttamente dall'applicazione. Nel mio requisito non dovrebbe uscire dall'applicazione deve tornare alla schermata precedente. Come posso fare questo ?.

Answer 1

È possibile gestire l'hardware di nuovo pulsante mi piace questo:

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

Non ho trovato le istruzioni sulla pagina di supporto della cronologia che sono utili quando si cerca di farlo; Non sono riuscito a vedere comunque l'uso delle rotte quando si ha a che fare con una vista di navigazione che può avere una grande pila di viste su di esso in qualsiasi momento.

Se si desidera solo il pulsante Indietro, tuttavia, è possibile utilizzare le funzioni popstate e pushstate (vedere https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history per un riferimento). L'idea è che tu abbia push uno stato quando aggiungi una vista e pop spento quando ne rimuovi uno. Il pulsante fisico di back su un telefono Android o il pulsante indietro su un browser desktop chiama in effetti history.back(); quindi tutto quello che devi fare è assicurarti che premendo il pulsante Indietro sulla barra del titolo faccia lo stesso, ed è ciò che fa scattare la vista di navigazione.

Per usufruire farlo funzionare in Sencha Touch, aggiungo quanto segue per il controllore principale:

In arbitri che ho riferimenti alla main vista (un'istanza di Ext.navigation.View) e alla sua barra del titolo, da cui è possibile agganciare l'evento del tasto posteriore es:

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

allega le seguenti funzioni mediante l'oggetto control config ..

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

Questi sono definiti come:

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

ho quindi collegare una funzione da eseguire quando lo stato viene estratto tramite la funzione init di ..

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

Ora, premendo di nuovo sulla barra del titolo, esegue history.back() , questo a sua volta spara l'evento popstate che provoca l'apertura della vista principale.

Se si desidera vedere questo funziona su un'applicazione reale, esiste un'app di ricerca di proprietà (v. Basic!) Che utilizza questa tecnica su github here.