/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-\r
-Ext.onReady(function() {\r
- \r
- // The only requirement for this to work is that you must have a hidden field and\r
- // an iframe available in the page with ids corresponding to Ext.History.fieldId\r
- // and Ext.History.iframeId. See history.html for an example.\r
- Ext.History.init();\r
- \r
- // Needed if you want to handle history for multiple components in the same page.\r
- // Should be something that won't be in component ids.\r
- var tokenDelimiter = ':';\r
- \r
- var tp = new Ext.TabPanel({\r
- renderTo: Ext.getBody(),\r
- id: 'main-tabs',\r
- height: 300,\r
- width: 600,\r
- activeTab: 0,\r
- \r
- items: [{\r
- xtype: 'tabpanel',\r
- title: 'Tab 1',\r
- id: 'tab1',\r
- activeTab: 0,\r
- tabPosition: 'bottom',\r
- \r
- items: [{\r
- title: 'Sub-tab 1',\r
- id: 'subtab1'\r
- },{\r
- title: 'Sub-tab 2',\r
- id: 'subtab2'\r
- },{\r
- title: 'Sub-tab 3',\r
- id: 'subtab3'\r
- }],\r
- \r
- listeners: {\r
- 'tabchange': function(tabPanel, tab){\r
- Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);\r
- }\r
- }\r
- },{\r
- title: 'Tab 2',\r
- id: 'tab2'\r
- },{\r
- title: 'Tab 3',\r
- id: 'tab3'\r
- },{\r
- title: 'Tab 4',\r
- id: 'tab4'\r
- },{\r
- title: 'Tab 5',\r
- id: 'tab5'\r
- }],\r
- \r
- listeners: {\r
- 'tabchange': function(tabPanel, tab){\r
- // Ignore tab1 since it is a separate tab panel and we're managing history for it also.\r
- // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.\r
- if(tab.id != 'tab1'){\r
- Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);\r
- }\r
- }\r
- }\r
- });\r
- \r
- // Handle this change event in order to restore the UI to the appropriate history state\r
- Ext.History.on('change', function(token){\r
- if(token){\r
- var parts = token.split(tokenDelimiter);\r
- var tabPanel = Ext.getCmp(parts[0]);\r
- var tabId = parts[1];\r
- \r
- tabPanel.show();\r
- tabPanel.setActiveTab(tabId);\r
- }else{\r
- // This is the initial default state. Necessary if you navigate starting from the\r
- // page without any existing history token params and go back to the start state.\r
- tp.setActiveTab(0);\r
- tp.getItem(0).setActiveTab(0);\r
- }\r
- });\r
- \r
+
+Ext.onReady(function() {
+
+ // The only requirement for this to work is that you must have a hidden field and
+ // an iframe available in the page with ids corresponding to Ext.History.fieldId
+ // and Ext.History.iframeId. See history.html for an example.
+ Ext.History.init();
+
+ // Needed if you want to handle history for multiple components in the same page.
+ // Should be something that won't be in component ids.
+ var tokenDelimiter = ':';
+
+ var tp = new Ext.TabPanel({
+ renderTo: Ext.getBody(),
+ id: 'main-tabs',
+ height: 300,
+ width: 600,
+ activeTab: 0,
+
+ items: [{
+ xtype: 'tabpanel',
+ title: 'Tab 1',
+ id: 'tab1',
+ activeTab: 0,
+ tabPosition: 'bottom',
+
+ items: [{
+ title: 'Sub-tab 1',
+ id: 'subtab1'
+ },{
+ title: 'Sub-tab 2',
+ id: 'subtab2'
+ },{
+ title: 'Sub-tab 3',
+ id: 'subtab3'
+ }],
+
+ listeners: {
+ 'tabchange': function(tabPanel, tab){
+ Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
+ }
+ }
+ },{
+ title: 'Tab 2',
+ id: 'tab2'
+ },{
+ title: 'Tab 3',
+ id: 'tab3'
+ },{
+ title: 'Tab 4',
+ id: 'tab4'
+ },{
+ title: 'Tab 5',
+ id: 'tab5'
+ }],
+
+ listeners: {
+ 'tabchange': function(tabPanel, tab){
+ // Ignore tab1 since it is a separate tab panel and we're managing history for it also.
+ // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
+ if(tab.id != 'tab1'){
+ Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
+ }
+ }
+ }
+ });
+
+ // Handle this change event in order to restore the UI to the appropriate history state
+ Ext.History.on('change', function(token){
+ if(token){
+ var parts = token.split(tokenDelimiter);
+ var tabPanel = Ext.getCmp(parts[0]);
+ var tabId = parts[1];
+
+ tabPanel.show();
+ tabPanel.setActiveTab(tabId);
+ }else{
+ // This is the initial default state. Necessary if you navigate starting from the
+ // page without any existing history token params and go back to the start state.
+ tp.setActiveTab(0);
+ tp.getItem(0).setActiveTab(0);
+ }
+ });
+
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff