Nested tab
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ 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); } }); }); </script> <!-- Fields required for history management --> <form id="history-form"class="x-hidden"> <input type="hidden" id="x-history-field" /> <iframe id="x-history-frame"></iframe> </form> </body> </html> Related examples in the same category
