ExtJS的History使用

页面导航:首页 > 网络编程 > JavaScript > ExtJS的History使用

ExtJS的History使用

来源: 作者: 时间:2016-01-19 18:32 【

窗体对象有个记录历史的对象history,使用这个对象可以实现上一页、下一页等效果。 例如:history go()下一页,history go(-1)上一页 在使用Ext 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表单,表单中包含一个隐藏文本域,一个iframe
            var 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',:'

Tab1

'}, {title:'分页二',id:'tab2',html:'

Tab2

'}, {title:'分页三',id:'tab3',html:'

Tab3

'} ] }); tabWindow.render('windowDiv'); var onTabChangeHandler = function(tpObj,tab){ console.debug('分页切换,切换成:'+tab.id); Ext.History.add('TAB_ID:'+tab.id); } tabWindow.on('tabchange',onTabChangeHandler); });
历史记录

运行效果如下:
这里写图片描述

Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <