Extjs - create unique tab urls

Question

I understand that ExtJS uses AJAX for all server-side communication, and ideally there will be only one page for each application. But I'm exploring the possibility of creating a unique URL for the ExtJS tab, which the user can then copy from the address bar for later use (the traditional approach to web applications is to bookmark bookmarks). Please let me know if someone has done something similar.

Answer 1

You can use the "hash". This is the part of the URL that follows the "#" character.

If you only need to respond to the hash at the time the page loads in order to support the bookmarks feature, 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 can also go further and use the hashchange event, which is supported in the latest versions of most browsers. This will allow you to respond to a hash that changes by the user or software 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's worth noting that Ext.History singleton promises functionality is similar to this. However, as with ExtJS 3.3.1, it did not receive support for the hashchange event and, instead, is completely dependent on the polling interval and the hidden iframe hack. I was not comfortable with its performance in modern browsers - in particular IE - until I rewrote it to use hashchange where possible.