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。