<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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.ru
* http://www.extjs.ru/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>