Comment faire pour utiliser Sencha NavigationView, liaison profonde et l'historique du navigateur correctement

Question

J'utilise un NavigationView en tant que panneau racine. Et la chose que j'essaye d'accomplir est de pousser des vues sur mon panneau de racine pendant que l'utilisateur navigue plus profondément dans mon application, et les saute de quand l'utilisateur revient en arrière.

Voici un exemple simple montrant mon problème: J'ai un type de vue montrant quelques détails d'entrée.

Ext.define('MyApp.view.EntryDetails', { 
    extend: 'Ext.Panel', 
    xtype: 'entrydetails', 

    config: { 
     tpl: '<div>{id}</div>' 
    } 
}); 

J'ai aussi un contrôleur configuré pour écouter l'itinéraire suivant: « entrée /: id », et pousser une nouvelle entrydetails vue sur la navigationstack (NavigationView) lorsque ce matches de route.

Ext.define('MyApp.controller.EntryDetails', { 
    extend: 'Ext.app.Controller', 
    config: { 
     routes: { 
      'entry/:id': 'showEntry' 
     }, 
     refs: { 
      navview: 'mynavigationview' 
     }, 
    }, 

    showEntry: function(id){ 
     this.getMain().push({ 
      xtype: 'entrydetails', 
      data: {id:id} 
     }); 
    } 
}); 

D'accord, cela fonctionne très bien. Supposons d'abord que je navigue vers: index.html # entry/1. Cela va pousser une nouvelle vue sur la pile, comme je le veux. Je clique ensuite sur un autre lien index.html # entry/2. Une autre vue est poussée sur la pile, c'est aussi le comportement prévu. Maintenant, le problème apparaît lorsque je clique sur le bouton RETOUR NAVIGATEURS. Cela change l'url en index.html # entry/1 et pousse encore une autre vue sur ma pile. Je voulais faire apparaître une vue au lieu d'en ajouter une autre. Si j'appuie sur le bouton Précédent de la barre d'outils, la vue apparaît comme je le voulais, mais ce n'est pas le cas avec le bouton Précédent du navigateur. Je comprends pourquoi: Le framework Sencha ne sait pas si le changement d'URL est dû à un autre lien avec la même url que l'URL du navigateur précédent, ou si j'appuyais sur le bouton précédent mon navigateur Et tout ce que mon code sait c'est qu'il devrait pousser une autre vue sur la pile quand il voit une URL changer en "entry /: id".

Quelle est la meilleure façon de résoudre ce problème. Comment puis-je détecter que le bouton de retour du navigateur a été pressé et la pop une vue de ma navigationview.

J'ai pensé à vérifier si l'URL modifiée était similaire à une vue plus bas sur ma pile de navigation, mais je ne suis pas sûr que ce soit la façon de le faire.

Toute aide/discussion sur le sujet est appréciée!

Answer 1

J'ai rencontré un problème similaire avec le composant NestedList. Ce que j'ai fini par faire était de surcharger le onBackTap, l'annuler, puis rediriger vers l'URL appropriée. Je suppose qu'il existe un moyen d'appliquer cette technique à NavigationView. Je ne sais pas si c'est vraiment la bonne façon de le faire, mais c'était la seule façon de faire en sorte que les boutons de retour du matériel et du logiciel jouent bien ensemble.

Answer 2

Vous pouvez ajouter ces lignes à votre point de vue navigation definiton,

initialize: function() { 
    this.getNavigationBar().on({ 
     back: this.onBackButtonTap, 
     scope: this 
    }); 
}, 
onBackButtonTap: function() { 
    this.pop(); 
    this.fireEvent('back', this); 
    history.back(); 
}