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

jsczxy2

浏览: 1275224 次
性别:
来自: 常州

最近访客更多访客>>

error0702

sagadan

gaofeng393

yaonai2003

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT 浏览器 JavaScript CSS JSP

先来做个例子吧，这里写一个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
踩

分享到：

EXT 3.x 使用详解之Ext.History浏览器前进 ... | struts2初学之form上传

2010-04-14 11:02
浏览 3501
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Ext中文官网

[转]EXT设计器破解2.X版本

EXT 3.x 使用详解之Ext.Direct(二)---polling,简单实现网页聊天功能

EXT 3.x 使用详解之Ext.Direct(一)

引用一下：EXT调试功能

EXT 3.x 使用详解之Ext.History浏览器前进后退功能(二)--整合grid分页

EXT 3.x 使用详解之fileUpload

EXT 3.x 使用详解之Ext.Viewport综合使用(一)

EXT 3.x 使用详解之Ext.grid.GridPanel(三)

EXT 3.x 使用详解之Ext.grid.GridPanel(二)

EXT 3.x 使用详解之Ext.grid.GridPanel(一)

EXT 3.x 使用详解之Ext.Window

开始研究ext,使用心得

最近访客更多访客>>