The source code

    Ext.onReady(function() {

        // The only requirement for this to work is that you must have a hidden field and
        // an iframe available in the page with ids corresponding to Ext.History.fieldId
        // and Ext.History.iframeId.  See history.html for an example.
        Ext.History.init();

        // Needed if you want to handle history for multiple components in the same page.
        // Should be something that won't be in component ids.
        var tokenDelimiter = ':';

        var tp = new Ext.TabPanel({
            renderTo: Ext.getBody(),
            id: 'main-tabs',
            height: 300,
            width: 600,
            activeTab: 0,

            items: [{
                xtype: 'tabpanel',
                title: 'Tab 1',
                id: 'tab1',
                activeTab: 0,
                tabPosition: 'bottom',

                items: [{
                    title: 'Sub-tab 1',
                    id: 'subtab1'
                },{
                    title: 'Sub-tab 2',
                    id: 'subtab2'
                },{
                    title: 'Sub-tab 3',
                    id: 'subtab3'
                }],

                listeners: {
                    'tabchange': function(tabPanel, tab){
                        Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
                    }
                }
            },{
                title: 'Tab 2',
                id: 'tab2'
            },{
                title: 'Tab 3',
                id: 'tab3'
            },{
                title: 'Tab 4',
                id: 'tab4'
            },{
                title: 'Tab 5',
                id: 'tab5'
            }],

            listeners: {
                'tabchange': function(tabPanel, tab){
                    // Ignore tab1 since it is a separate tab panel and we're managing history for it also.
                    // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
                    if(tab.id != 'tab1'){
                        Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
                    }
                }
            }
        });

        // Handle this change event in order to restore the UI to the appropriate history state
        Ext.History.on('change', function(token){
            if(token){
                var parts = token.split(tokenDelimiter);
                var tabPanel = Ext.getCmp(parts[0]);
                var tabId = parts[1];

                tabPanel.show();
                tabPanel.setActiveTab(tabId);
            }else{
                // This is the initial default state.  Necessary if you navigate starting from the
                // page without any existing history token params and go back to the start state.
                tp.setActiveTab(0);
                tp.getItem(0).setActiveTab(0);
            }
        });

    });