Extjs - 为标签生成唯一的 url

Question

我知道 ExtJS 使用 AJAX 进行所有服务器端通信，理想情况下每个应用程序只有一页。但我正在探索为 ExtJS 选项卡生成唯一 url 的可能性，然后用户可以从地址栏中复制该 URL 以供以后使用(传统的 Web 应用程序方法 - 使页面可添加书签)。请让我知道是否有人做过类似的事情。

Answer 1

您可以使用“哈希”。这是 URL 中跟在“#”字符之后的部分。

如果您只需要在页面加载时对哈希使用react以支持书签功能，那么您可以使用以下方法:

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 事件。这将允许您在页面完成加载后对用户或编程方式更改的哈希使用react:

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

值得注意的是 Ext.History 单例 promise 与此类似的功能。然而，从 ExtJS 3.3.1 开始，它没有得到对 hashchange 事件的支持，而是完全依赖于轮询间隔和隐藏的 iframe hack。我对它在现代浏览器中的性能并不满意——尤其是 IE——直到我重写它以在可用的情况下使用 hashchange。