Question

在Ext jS中标签需要一些帮助。

我有一个包含多个标签的标签面板，点击各个标签会更改网址。我目前正在使用哈希。但是，当我使用“ 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）保存页面的当前状态，解决了当前的问题。

但是，我使用的网址应在任何时间段内有效。

此外，如果我上次访问过的网址是 ... / 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

Answer 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);

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

1 个答案: