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