Cómo usar Sencha NavigationView, enlaces profundos e historial del navegador correctamente

Question

Uso una NavigationView como panel raíz. Y lo que intento lograr es enviar vistas a mi panel raíz a medida que el usuario navega más hacia mi aplicación, y abrirlas cuando el usuario regresa.

Aquí hay un ejemplo simple que muestra mi problema: Tengo un tipo de vista que muestra algunos detalles de la entrada.

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

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

I también tienen un controlador configurado para escuchar a la siguiente ruta: "entrada /: id", y empujar una nueva entrydetails vista sobre el navigationstack (NavigationView) cuando esta ruta partidos.

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

Bien, esto está funcionando bien. Ahora supongamos primero que navego a: index.html # entry/1. Esto impulsará una nueva vista en la pila, justo como yo quiero. Luego hago clic en otro enlace index.html # entry/2. Otra vista es empujada a la pila, este es también el comportamiento previsto. Ahora aparece el problema cuando hago clic en el botón ATRÁS de BROWSERS. Esto cambia la URL a index.html # entry/1 y empuja otra vista a mi pila. Quería abrir una vista en lugar de agregar otra. Si presiono el botón de barras de herramientas hacia atrás, la vista aparece tal como yo quería, pero este no es el caso con el botón de retroceso de los navegadores.

Entiendo por qué sucede esto: El marco táctil de Sencha no sabe si el cambio de URL se debió a que presioné otro enlace con la misma URL que la URL anterior del historial del navegador, o si estaba presionando el botón Atrás en mi navegador Y todo lo que mi código sabe es que debe presionar otra vista en la pila cuando ve una url cambiar a "entry /: id".

¿Cuál es la mejor manera de resolver este problema. ¿Cómo puedo detectar que se presionó el botón Atrás del navegador y que aparezca una vista desde mi vista de navegación?

He pensado en comprobar si la URL modificada era similar a una vista más abajo en mi pila de navegación, pero no estoy seguro de si esa es la manera de hacerlo.

¡Se agradece cualquier ayuda/discusión sobre el tema!

Answer 1

Tuve un problema similar con el componente NestedList. Lo que terminé haciendo fue anular el onBackTap, cancelarlo y luego redireccionar a la URL adecuada. Supongo que hay alguna forma de aplicar esta técnica a NavigationView también. No sé si esta es realmente la manera correcta de hacerlo, pero era la única forma en que podía obtener los botones de respaldo de hardware y software para jugar bien juntos.

Answer 2

Puede añadir estas líneas a su navegación vista definiton,

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