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