examples/history/history.js

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