How to maintain state of page with tabs on browser refresh

Question

In ExtJs, what is the best way to handle Browser refresh?

Say, I've a page with two tabs A and B and the token when tab A is active is #mytoken/:someidforA and the token when tab B is actibe is #mytoken/:someidforB

How do we ensure that the page stays in the same tab when we refresh the browser?

I'm doing something like this using Router in ExtJs5

window.onbeforeunload = function() {
    token = // get history token
     MyApp.getController('Main').redirectTo(token);
}

and inside the ViewControllers -

routes: {
    "#mytoken/:someidforA" : "loadA",
    "#mytoken/:someidforB" : "loadB" 

}

Is this a good way to do it?

score 2 · Accepted Answer · answered Mar 06 '15 at 13:04

I would personally use the documented routes

Example:

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'user/:id' : 'onUser'
    },

    onUser : function(id) {
        //...
    }
});

You can also define the default route with the defaultToken property:

defaultToken : 'home'

It seems like you are already using some of these features. If the URL is something like example.com/#user/4 then on page refresh the application can handle this route as it previously did and show the same page/section.

To restore all the tabs that were open before refresh you'd probably have to look at using something like localstorage to keep state across page refreshes

How to maintain state of page with tabs on browser refresh

1 Answers1