Extjs - 为选项卡生成唯一的URL

Question

我知道ExtJS使用AJAX进行所有服务器端通信,理想情况下每个应用程序只有一个页面.但我正在探索为ExtJS选项卡生成唯一URL的可能性,然后用户可以从地址栏复制以供以后使用(传统的Web应用程序方法 - 使页面可收藏).如果有人做过类似的事情,请告诉我.

Answer 1

你可以使用"哈希".这是URL后面的"#"字符部分.

如果您只需要在页面加载时对哈希做出反应以支持书签功能,那么您可以使用以下内容:

Ext.onReady(function() {
    var tabPanel = new Ext.TabPanel({
        // Configure for use in viewport as needed.
        listeners: {
            tabchange: function( tabPanel, tab ) {
                window.location.hash = '#'+ tab.itemId;
            }
        }
    });

    var token = window.location.hash.substr(1);

    if ( token ) {
        var tab = tabPanel.get(token);

        if ( ! tab ) {
            // Create tab or error as necessary.
            tab = new Ext.Panel({
                itemId: token,
                title: 'Tab: '+ token
            });

            tabPanel.add(tab);
        }

        tabPanel.setActiveTab(tab);
    }
});

您也可以选择进一步使用大多数浏览器的最新版本中支持的hashchange事件.这将允许您在页面加载完成后通过用户或编程方式对正在更改的哈希做出反应:

if ( 'onhashchange' in window ) {
    window.onhashchange = function() {
        var token = window.location.hash.substr(1);
        // Handle tab creation and activation as above.
    }
}

值得注意的是,Ext.History单例承诺提供与此类似的功能.但是,从ExtJS 3.3.1开始,它还没有得到对hashchange事件的支持,而是完全依赖于轮询间隔和隐藏的iframe hack.我对它在现代浏览器中的表现不满意 - 特别是IE - 直到我重写它以使用hashchange(如果可用).