`
jsczxy2
  • 浏览: 1255245 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

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

    博客分类：
  • ext
EXT浏览器JavaScriptCSSJSP 
阅读更多

先来做个例子吧，这里写一个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>
1
顶
0
踩
分享到：
| struts2初学之form上传
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics