EXT 3.x 使用详解之Ext.History浏览器前进后退功能(一)
先来做个例子吧，这里写一个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" 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>