3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 Ext.onReady(function() {
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.
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 = ':';
19 var tp = new Ext.TabPanel({
20 renderTo: Ext.getBody(),
31 tabPosition: 'bottom',
45 'tabchange': function(tabPanel, tab){
46 Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
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.
68 Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
74 // Handle this change event in order to restore the UI to the appropriate history state
75 Ext.History.on('change', function(token){
77 var parts = token.split(tokenDelimiter);
78 var tabPanel = Ext.getCmp(parts[0]);
82 tabPanel.setActiveTab(tabId);
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.
87 tp.getItem(0).setActiveTab(0);