VANSTYN / RapidApp-0.99016 / code_scraps / history_test / HistTest.html 
<html>
<head>
    <title>History Example</title>
    <link rel="stylesheet" type="text/css" href="../ext-3.3.0/resources/css/ext-all.css"/>

    <script type="text/javascript" src="../ext-3.3.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-3.3.0/ext-all.js"></script>
    <script type="text/javascript" src="root/static/rapidapp/js/RapidApp/History.js"></script>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="examples.css"/>
</head>
<body>
<script type="text/javascript" src="examples.js"></script>

<h1>History Example</h1>

<p>This is a simple implmenetation of the <tt>Ext.History</tt> component for managing browser back/forward navigation within a single page.</p>

<p>It demonstrates managing history for multiple components within the page. Simply change tabs and use the browser Back
and Forward buttons to navigate them.</p>

<p>The js is not minified so it is readable. See <a href="history.js">history.js</a>.</p>

<!-- 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>

<script type="text/javascript">
    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: {
                'beforetabchange': function(tabPanel, newTab, currentTab){
                    Ext.History.recordHistEvent(tabPanel.id, currentTab? currentTab.id : "", newTab? newTab.id : "");
                    return true;
                }
            }*/
        },{
            title: 'Tab 2',
            id: 'tab2'
        },{
            title: 'Tab 3',
            id: 'tab3'
        },{
            title: 'Tab 4',
            id: 'tab4'
        },{
            title: 'Tab 5',
            id: 'tab5'
        }]/*,
        
			listeners: {
				 'beforetabchange': function(tabPanel, newTab, currentTab){
					  Ext.History.recordHistEvent(tabPanel.id, currentTab? currentTab.id : "", newTab? newTab.id : "");
					  return true;
				 }
			}*/
    });
</script>

</body>
</html>