使用 Ext JS 为标签添加书签？

Posted 2023-02-26

【中文标题】使用 Ext JS 为标签添加书签？

【英文标题】：Bookmarking of tabs using Ext JS?

【发布时间】：2013-03-11 06:49:12

【问题描述】：

在 Ext jS 中为标签添加书签需要一些帮助。

我有一个包含多个选项卡的选项卡面板，单击各个选项卡会更改 URL。我目前正在使用哈希。但是，当我使用它的“id + delimiter + other id's” URL 直接导航到页面时，我无法恢复应用程序。

这里是示例代码：

launch : function() 
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider(
            
                expires : new Date(new Date().getTime()
                        + (1000 * 60 * 60 * 24 * 7))
            ));

var  tabPanel=new Ext.TabPanel(
    width:1000,
    title:'TabPanel',
    height:700,
    id:'main-tab',
    activeTab:0,
    layout:'fit',       
    region:'north', 
    stateful:true,
    stateId:'tp1',
    stateEvents:['tabchange'],
    getState:function()
        return 
            activeTab:this.items.findIndex('id',this.getActiveTab().id)             
        ;
    ,
    applyState:function(s)
        this.setActiveTab(s.activeTab);
    ,
    items:
        [
          //included tabID and title
         ],
     listeners:            
                tabchange:function(tabPanel,currTab)                                       
                    window.location.hash='#myTabs/'+currTab.id; //config.position;
                    console.log(window.location);                   
                
        
);

var viewport=new Ext.Viewport(
    id:'main-viewport',     
    layout : 'fit',
    title:'Main',
    deferredRender:true,
    items : [ tabPanel ],
    width:200,
    region:'west'
);

viewport.doLayout();

我目前通过使用expire 配置（使用Ext.state.Manager 和Ext.state.CookieProvider）保存页面的当前状态解决了这个问题。

但是，我使用的网址应该在任何时间长度内都有效。

另外，如果我上次访问的 URL 是 .../apps/Bookmarking/services.html#myTabs/5 我将我的 URL 改回 .../apps/Bookmarking/services.html，它应该回到我的默认（在我的情况下是第一个）选项卡。相反，它导航回 .../apps/Bookmarking/services.html#myTabs/5。

我该如何纠正？

提前致谢！

PS：请查看此链接以了解我针对此问题所做的全部更改 http://www.sencha.com/forum/showthread.php?154174-Bookmarking-and-History-in-extjs

【问题讨论】：

我尝试使用Ext.util.History 功能实现这个概念，但是，我无法为标签添加书签。示例：dev.sencha.com/deploy/ext-4.0.0/examples/history/… 应该跳转到 Tab 4，但它会回溯到 Tab 1:subtab 1。

【参考方案1】：

我认为您在查看Ext.util.History 时走在正确的轨道上。不幸的是，我认为您刚刚在 their example 中发现了一个错误。

而不是总是在渲染后设置活动标签；

function onAfterRender() 
    ...

    var activeTab1 = Ext.getCmp('main-tabs').getActiveTab(),
        activeTab2 = activeTab1.getActiveTab();

    onTabChange(activeTab1, activeTab2);

如果没有令牌，可能会尝试设置它；

Ext.util.History.on('ready', function(history)
    if ( !history.getToken() ) 
        var activeTab1 = Ext.getCmp('main-tabs').getActiveTab(),
            activeTab2 = activeTab1.getActiveTab();

        onTabChange(activeTab1, activeTab2);
    
, this);