Extjs - Generating a unique url for the tabs

Question

I understand that ExtJS uses AJAX for all server side communication, and that ideally there would be only one page per application. But I am exploring the possibility of generat

Answer 1

You can make use of the "hash". This is the portion of the URL which follows the "#" character.

If you only need to react to the hash at time of page load to support the bookmarking feature then you can get away with something like:

Ext.onReady(function() {
    var tabPanel = new Ext.TabPanel({
        // Configure for use in viewport as needed.
        listeners: {
            tabchange: function( tabPanel, tab ) {
                window.location.hash = '#'+ tab.itemId;
            }
        }
    });

    var token = window.location.hash.substr(1);

    if ( token ) {
        var tab = tabPanel.get(token);

        if ( ! tab ) {
            // Create tab or error as necessary.
            tab = new Ext.Panel({
                itemId: token,
                title: 'Tab: '+ token
            });

            tabPanel.add(tab);
        }

        tabPanel.setActiveTab(tab);
    }
});

You may also choose to go further and employ the hashchange event supported in recent versions of most browsers. This will allow you to react to the hash being changed by either user or programmatic means after the page has finished loading:

if ( 'onhashchange' in window ) {
    window.onhashchange = function() {
        var token = window.location.hash.substr(1);
        // Handle tab creation and activation as above.
    }
}

It is worth noting that the Ext.History singleton promises functionality similar to this. However, as of ExtJS 3.3.1 it has not been given support for the hashchange event and is instead wholly dependent on a polling interval and a hidden iframe hack. I was not satisfied with its performance in modern browsers - IE in particular - until I rewrote it to use hashchange where available.