1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | |
---|
8 | Ext.onReady(function() { |
---|
9 | |
---|
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. |
---|
13 | Ext.History.init(); |
---|
14 | |
---|
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 = ':'; |
---|
18 | |
---|
19 | var tp = new Ext.TabPanel({ |
---|
20 | renderTo: Ext.getBody(), |
---|
21 | id: 'main-tabs', |
---|
22 | height: 300, |
---|
23 | width: 600, |
---|
24 | activeTab: 0, |
---|
25 | |
---|
26 | items: [{ |
---|
27 | xtype: 'tabpanel', |
---|
28 | title: 'Tab 1', |
---|
29 | id: 'tab1', |
---|
30 | activeTab: 0, |
---|
31 | tabPosition: 'bottom', |
---|
32 | |
---|
33 | items: [{ |
---|
34 | title: 'Sub-tab 1', |
---|
35 | id: 'subtab1' |
---|
36 | },{ |
---|
37 | title: 'Sub-tab 2', |
---|
38 | id: 'subtab2' |
---|
39 | },{ |
---|
40 | title: 'Sub-tab 3', |
---|
41 | id: 'subtab3' |
---|
42 | }], |
---|
43 | |
---|
44 | listeners: { |
---|
45 | 'tabchange': function(tabPanel, tab){ |
---|
46 | Ext.History.add(tabPanel.id + tokenDelimiter + tab.id); |
---|
47 | } |
---|
48 | } |
---|
49 | },{ |
---|
50 | title: 'Tab 2', |
---|
51 | id: 'tab2' |
---|
52 | },{ |
---|
53 | title: 'Tab 3', |
---|
54 | id: 'tab3' |
---|
55 | },{ |
---|
56 | title: 'Tab 4', |
---|
57 | id: 'tab4' |
---|
58 | },{ |
---|
59 | title: 'Tab 5', |
---|
60 | id: 'tab5' |
---|
61 | }], |
---|
62 | |
---|
63 | listeners: { |
---|
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. |
---|
67 | if(tab.id != 'tab1'){ |
---|
68 | Ext.History.add(tabPanel.id + tokenDelimiter + tab.id); |
---|
69 | } |
---|
70 | } |
---|
71 | } |
---|
72 | }); |
---|
73 | |
---|
74 | // Handle this change event in order to restore the UI to the appropriate history state |
---|
75 | Ext.History.on('change', function(token){ |
---|
76 | if(token){ |
---|
77 | var parts = token.split(tokenDelimiter); |
---|
78 | var tabPanel = Ext.getCmp(parts[0]); |
---|
79 | var tabId = parts[1]; |
---|
80 | |
---|
81 | tabPanel.show(); |
---|
82 | tabPanel.setActiveTab(tabId); |
---|
83 | }else{ |
---|
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. |
---|
86 | tp.setActiveTab(0); |
---|
87 | tp.getItem(0).setActiveTab(0); |
---|
88 | } |
---|
89 | }); |
---|
90 | |
---|
91 | }); |
---|