ExtJS的History使用

// 窗体对象有个记录历史的对象——history，使用这个对象可以实现上一页、下一页等效果。// 例如：history.go()下一页，history.go(-1)上一页// 在使用Ext.history之前，必须现在页面中放置一个表单元素，可以直接将HTML代码写到页面中，也可以使用ExtJs的DOM接口来创建// Ext.getBody()会获得window.document并封装成Ext.Element// 接着调用Ext.Element.createChild()创建表单元素Ext.onReady(function(){// 创建form表单，表单中包含一个隐藏文本域，一个iframevar historyForm = Ext.getBody().createChild({tag:'form',action:'#',cls:'x-hidden',id:'history-form',children:[{tag:'input',id:Ext.History.fieldId,type:'hidden'},{tag:'iframe',id:Ext.History.iframeId}]});// 事件处理函数，通过传入不同的值执行不同的操作var onHistoryChangeHandler = function(token){console.info('浏览器历史记录改变:'+token);if(token){var tabId = parseInt(token.substr(10))-1;console.info(token.substr(10));tabWindow.setActiveTab(tabId);}}// 先让token显示在console上，然后再调用初始化方法(类似于构造函数，用以初始化组件)Ext.History.init();// 将change事件与事件处理函数进行连接Ext.History.on('change',onHistoryChangeHandler);// 创建分页组件var tabWindow = new Ext.TabPanel({title:'History测试',activeTab:0,items:[{title:'分页一',id:'tab1',html:'<h1>Tab1</h1>'},{title:'分页二',id:'tab2',html:'<h1>Tab2</h1>'},{title:'分页三',id:'tab3',html:'<h1>Tab3</h1>'}    ]});tabWindow.render('windowDiv');var onTabChangeHandler = function(tpObj,tab){console.debug('分页切换，切换成：'+tab.id);Ext.History.add('TAB_ID:'+tab.id);}tabWindow.on('tabchange',onTabChangeHandler);});</script></head><body><div id="windowDiv">历史记录</div></body>

运行效果如下：

ExtJS的History使用相关推荐

什么是Ext(ExtJs)【转载】
Ext发展史 1.第一只"出海"的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展,但后来一度风头盖过其父辈YUI,足以说明大家对它的热情, ...
Extjs 代码拾穗
1.tree grid 添加一行 var rootNode = store.getRootNode(); var newRecord = Ext.create('MatrixDlv',{"s ...
Software knowledge Encyclopedia：extjs是一种软件，自动生成行号，支持checkbox全选
extjs是一种软件.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能. 功能丰富,无人能出其右. 无论是界 ...
Extjs中itemselector组件自定义方法得到displayField值
首先来看一下,这个在双选框的效果图: 在引入的itemselector.js文件中,只定义了getvalue()的方法得到的是value的值,而我现在要的是 displayField的值,所以我在it ...
php漂亮的登录界面,extjs漂亮简洁的登录界面
[实例简介] MVC模式做的web前端ext登陆界面,易懂,适合初学者 [实例截图] [核心代码] f13ea5e7-9479-443a-85e6-6b939a528dbc └── EXT登录小例子 ...
【旧文重温】走近 ExtJs 之关于作者 Jack Slocum 的十个问题
October 10th, 2006 by Eric Miraglia http://www.yuiblog.com/blog/2006/10/10/ten-questions-slocum/ 这是去 ...
在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
设置显示VSCode的修改历史Local History，方便多人开发的时候快速查看谁修改了代码（也可以防止误删代码文件）
Ctrl+Shift+X 搜索 Local History Ctrl+Shift+E
LINUX下用CTRL+R快速搜索HISTORY历史命令，快速索引到之前使用过的命令行语句
LINUX下用CTRL+R快速搜索HISTORY历史命令,快速索引到之前使用过的命令行语句前提是,搜索已经使用的命令,否则是查不出来结果的. ctrl+r 用途:反向搜索执行过的命令.(revers ...

ExtJS的History使用

ExtJS的History使用相关推荐

最新文章

热门文章