EXT 3.x 使用详解之Ext.History浏览器前进后退功能(一)

最新推荐文章于 2024-09-17 16:50:18 发布

iteye_12411

最新推荐文章于 2024-09-17 16:50:18 发布

阅读量430

点赞数

分类专栏： ext 文章标签： EXT 浏览器 JavaScript CSS JSP ViewUI

ext 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用Ext3框架实现浏览器前进后退功能的例子。通过监听Tab面板的变化，并利用Ext.History组件来同步浏览器的历史记录，使得用户可以在多个标签页之间使用浏览器的前进后退按钮进行导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来做个例子吧，这里写一个ext官方的例子，注意注释:

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
//自己加入ext相应的css和js,这里就不再写明了
<html>
	<head>
		<title>Ext3浏览器前进后退功能</title>
		<script type="text/javascript">
		Ext.onReady(function() {
			
			//初始化history组件
    		Ext.History.init();
    
			//设置截断符
		    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){
		                	//tab1切换时修改浏览器hash
		                    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){
		            		//main-tabs切换时修改浏览器hash
		                    Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
		            }
		        }
		    });
		    
		    //获取浏览器hash中#后面的字符串
		    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{
		        //如果没有字符串则直接默认第一个标签页
		            tp.setActiveTab(0);
		            tp.getItem(0).setActiveTab(0);
		        }
		    });
		});
		</script>
	</head>
	<body>
	<!-- Ext.History所需的form  begin-->
		<form id="history-form" class="x-hidden">  
             <input type="hidden" id="x-history-field" />  
             	<iframe id="x-history-frame">  
             </iframe>  
        </form> 
    <!-- Ext.History所需的form  end -->    
    
    
     <!-- 测试一下刷新 -->	
      <input type="button" onclick="Ext.History.fireEvent('change',Ext.History.getToken());" value="刷新">
      
     <!-- 测试一下直接使用add的效果 -->	 
      <input type="button" onclick="Ext.History.add('main-tabs:tab1');" value="第一页">
      
      <!-- 
      	最后解释下步骤，首先把tabchange事件绑定到Ext.History
      	然后再使用Ext.History来进行事件处理
        然后试试操作以后使用浏览器的前进后退就能看到效果了
       -->
	</body>
</html>