examples/history/history.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 Ext.onReady(function() {
   9
  10     // The only requirement for this to work is that you must have a hidden field and
  11     // an iframe available in the page with ids corresponding to Ext.History.fieldId
  12     // and Ext.History.iframeId.  See history.html for an example.
  13     Ext.History.init();
  14
  15     // Needed if you want to handle history for multiple components in the same page.
  16     // Should be something that won't be in component ids.
  17     var tokenDelimiter = ':';
  18
  19     var tp = new Ext.TabPanel({
  20         renderTo: Ext.getBody(),
  21         id: 'main-tabs',
  22         height: 300,
  23         width: 600,
  24         activeTab: 0,
  25
  26         items: [{
  27             xtype: 'tabpanel',
  28             title: 'Tab 1',
  29             id: 'tab1',
  30             activeTab: 0,
  31             tabPosition: 'bottom',
  32
  33             items: [{
  34                 title: 'Sub-tab 1',
  35                 id: 'subtab1'
  36             },{
  37                 title: 'Sub-tab 2',
  38                 id: 'subtab2'
  39             },{
  40                 title: 'Sub-tab 3',
  41                 id: 'subtab3'
  42             }],
  43
  44             listeners: {
  45                 'tabchange': function(tabPanel, tab){
  46                     Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
  47                 }
  48             }
  49         },{
  50             title: 'Tab 2',
  51             id: 'tab2'
  52         },{
  53             title: 'Tab 3',
  54             id: 'tab3'
  55         },{
  56             title: 'Tab 4',
  57             id: 'tab4'
  58         },{
  59             title: 'Tab 5',
  60             id: 'tab5'
  61         }],
  62
  63         listeners: {
  64             'tabchange': function(tabPanel, tab){
  65                 // Ignore tab1 since it is a separate tab panel and we're managing history for it also.
  66                 // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
  67                 if(tab.id != 'tab1'){
  68                     Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
  69                 }
  70             }
  71         }
  72     });
  73
  74     // Handle this change event in order to restore the UI to the appropriate history state
  75     Ext.History.on('change', function(token){
  76         if(token){
  77             var parts = token.split(tokenDelimiter);
  78             var tabPanel = Ext.getCmp(parts[0]);
  79             var tabId = parts[1];
  80
  81             tabPanel.show();
  82             tabPanel.setActiveTab(tabId);
  83         }else{
  84             // This is the initial default state.  Necessary if you navigate starting from the
  85             // page without any existing history token params and go back to the start state.
  86             tp.setActiveTab(0);
  87             tp.getItem(0).setActiveTab(0);
  88         }
  89     });
  90
  91 });