Extjs - 为标签生成唯一的URL [英] Extjs - Generating a unique url for the tabs

问题描述

我了解ExtJS使用AJAX进行所有服务器端通信，理想情况下每个应用程序只能有一个页面。但是，我正在探索为ExtJS选项卡生成唯一的URL，用户可以从地址栏复制以备以后使用（传统的Web应用程序 - 使页面具有书签功能）。如果有人做过类似的事情，请让我知道。

I understand that ExtJS uses AJAX for all server side communication, and that ideally there would be only one page per application. But I am exploring the possibility of generating a unique url for a ExtJS tab which the user can then copy from the address bar for later use(traditional web application approach - making a page bookmarkable). Please let me know if anyone has done anything similar.

推荐答案

你可以使用哈希。这是＃字符后面的URL部分。

You can make use of the "hash". This is the portion of the URL which follows the "#" character.

如果只需要在页面加载时对哈希做出反应来支持书签功能，你可以得到如下的东西：

If you only need to react to the hash at time of page load to support the bookmarking feature then you can get away with something like:

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事件。这将允许您对页面加载完成后由用户或编程方式更改的哈希作出反应：

You may also choose to go further and employ the hashchange event supported in recent versions of most browsers. This will allow you to react to the hash being changed by either user or programmatic means after the page has finished loading:

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攻击。我不满意它在现代浏览器中的表现 - 尤其是IE - 直到我重写了使用hashchange才可用。

It is worth noting that the Ext.History singleton promises functionality similar to this. However, as of ExtJS 3.3.1 it has not been given support for the hashchange event and is instead wholly dependent on a polling interval and a hidden iframe hack. I was not satisfied with its performance in modern browsers - IE in particular - until I rewrote it to use hashchange where available.

这篇关于Extjs - 为标签生成唯一的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！