examples/history/history.js

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