JavaScript DHTML/Ext JS/History

Материал из Web эксперт
Перейти к: навигация, поиск

Managing history for multiple components within the page

   
<!--
/*!
 * 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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/History&oldid=2464»