Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / examples / history / history.js
index ce45c34..a53ec3e 100644 (file)
@@ -1,91 +1,91 @@
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * 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