examples/history/history.js

   1 Ext.require([
   2     'Ext.util.History',
   3     'Ext.tab.Panel'
   4 ]);
   5
   6 Ext.onReady(function() {
   7     // The only requirement for this to work is that you must have a hidden field and
   8     // an iframe available in the page with ids corresponding to Ext.History.fieldId
   9     // and Ext.History.iframeId.  See history.html for an example.
  10     Ext.History.init();
  11
  12     // Needed if you want to handle history for multiple components in the same page.
  13     // Should be something that won't be in component ids.
  14     var tokenDelimiter = ':';
  15
  16     function onTabChange(tabPanel, tab) {
  17         var tabs = [],
  18             ownerCt = tabPanel.ownerCt,
  19             oldToken, newToken;
  20
  21         tabs.push(tab.id);
  22         tabs.push(tabPanel.id);
  23
  24         while (ownerCt && ownerCt.is('tabpanel')) {
  25             tabs.push(ownerCt.id);
  26             ownerCt = ownerCt.ownerCt;
  27         }
  28
  29         newToken = tabs.reverse().join(tokenDelimiter);
  30
  31         oldToken = Ext.History.getToken();
  32
  33         if (oldToken === null || oldToken.search(newToken) === -1) {
  34             Ext.History.add(newToken);
  35         }
  36     }
  37
  38     // Handle this change event in order to restore the UI to the appropriate history state
  39     function onAfterRender() {
  40         Ext.History.on('change', function(token) {
  41             var parts, tabPanel, length, i;
  42
  43             if (token) {
  44                 parts = token.split(tokenDelimiter);
  45                 length = parts.length;
  46
  47                 // setActiveTab in all nested tabs
  48                 for (i = 0; i < length - 1; i++) {
  49                     Ext.getCmp(parts[i]).setActiveTab(Ext.getCmp(parts[i + 1]));
  50                 }
  51             }
  52         });
  53
  54         // This is the initial default state.  Necessary if you navigate starting from the
  55         // page without any existing history token params and go back to the start state.
  56         var activeTab1 = Ext.getCmp('main-tabs').getActiveTab(),
  57             activeTab2 = activeTab1.getActiveTab();
  58
  59         onTabChange(activeTab1, activeTab2);
  60     }
  61
  62     Ext.create('Ext.TabPanel', {
  63         renderTo: Ext.getBody(),
  64         id: 'main-tabs',
  65         height: 300,
  66         width: 600,
  67         activeTab: 0,
  68         defaults: {
  69             padding: 10
  70         },
  71
  72         items: [{
  73             xtype: 'tabpanel',
  74             title: 'Tab 1',
  75             id: 'tab1',
  76             activeTab: 0,
  77             padding: 5,
  78             border: true,
  79             plain: true,
  80
  81             defaults: {
  82                 padding: 10
  83             },
  84
  85             items: [{
  86                 title: 'Sub-tab 1',
  87                 id: 'subtab1',
  88                 html: 'Sub-tab 1 content'
  89             },{
  90                 title: 'Sub-tab 2',
  91                 id: 'subtab2',
  92                 html: 'Sub-tab 2 content'
  93             },{
  94                 title: 'Sub-tab 3',
  95                 id: 'subtab3',
  96                 html: 'Sub-tab 3 content'
  97             }],
  98
  99             listeners: {
 100                 tabchange: onTabChange
 101             }
 102         },{
 103             title: 'Tab 2',
 104             id: 'tab2',
 105             html: 'Tab 2 content'
 106         },{
 107             title: 'Tab 3',
 108             id: 'tab3',
 109             html: 'Tab 3 content'
 110         },{
 111             title: 'Tab 4',
 112             id: 'tab4',
 113             html: 'Tab 4 content'
 114         },{
 115             title: 'Tab 5',
 116             id: 'tab5',
 117             html: 'Tab 5 content'
 118         }],
 119         listeners: {
 120             tabchange: onTabChange,
 121             afterrender: onAfterRender
 122         }
 123     });
 124 });