Question

当您使用ExtJS（使用其MVC和Viewport）开发Web应用程序时，通常无法导航：页面中的每个项目（按钮，文本字段，文本区域......）都绑定到特定的方法视图的控制器。因此，当您“浏览”应用程序时，原始URL始终相同且不会更改。

现在，以带有以下按钮的标题菜单栏的应用程序为例：

Home | Setup | Archive

应用程序的原始URL采用以下内容：

http://www.mydomain.com/webapp

此时，当有人单击“主页”或“设置”或“存档”菜单时，某个视图将显示在中心区域，并且URL应在

中更改

http://www.mydomain.com/webapp/[home|setup|archive]

因此，如果单击“设置”菜单，则应在地址栏中显示以下URL：

http://www.mydomain.com/webapp/setup

此外，如果我从另一个网址在地址栏中输入相同的网址，则应显示相同的网页。

但目前我的网络应用仍保留在显示请求视图的“http://www.mydomain.com/webapp”中。（例如，MyApp.view.Setup）。

这就是重点：如何使用URL导航开发webapp（使用ExtJS，MVC和Viewport）？是否可以不将javascript / html代码嵌套到其他PHP / Ruby / Python / $ RANDOM_SERVER_LANGUAGE中？（我想通过服务器端拆分客户端）

此实现已经存在：它是ExtJS API Documentation。如果我是对的，那么没有提供所请求页面的服务器端应用程序或.htaccess。事实上，主目录中有一个名为“source”的文件夹，其中包含每个类的HTML文件。他们是如何做到的？

提前致谢。威尔克

Answer 1

好的，我自己找到了解决方案：P

嗯，这种事情可以通过以下方式完成：

HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>Stackoverflow</title>
    <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../extjs-4.1.0/ext-all.js"> </script>
    <script type="text/javascript" src="sof.js"> </script>
</head>
<body>
    <a href="#!photos.html">Photos</a>
    <a href="#!info.html">Info</a>
    <a href="#!aboutme.html">About Me</a>

    <div id="results"></div>
</body>

Javascript部分，使用ExtJS框架完成（sof.js）

// Loads each HTML part with an AJAX request
function loadAnchor (url) {
    Ext.Ajax.request ({
        url: url ,
        success: function (res) {
            // Edits results div with the new HTML part
            var r = Ext.get ('results');
            r.dom.innerHTML = res.responseText;
        }
    });
}


Ext.onReady (function () {
    var anchors = document.getElementsByTagName ('a');

    Ext.each (anchors, function (a) {
        a = Ext.get (a);
        // Attaches to each anchor the following function on click event
        a.on ('click', function (ev, anchor) {
            // Splits the hash, keeping the HTML requested
            var url = anchor.getAttribute('href').split('#!')[1];
            loadAnchor (url);
        });
    });

    // This is done without clicking an anchor, but by inserting directly the full URI
    // E.g.: http://www.mydomain.com/webapp/index.html#!info.html instead of clicking the anchor Info
    var url = document.location.hash.split('#!')[1];
    loadAnchor (url);
});

如您所见，每个锚都绑定了一个javascript函数，该函数通过AJAX请求加载所请求的资源。然后，使用响应修改某个容器（例如div）（可能是HTML代码或JSON，XML等）。

然而，这件事必须使用像Apache这样的服务器网络，但没有服务器应用程序：事实上，每个资源都可以是纯HTML文件，并且不需要服务器应用程序来提供这些文件。

有关详细信息，请参阅：

Answer 2

ExtJs有一个内置类来处理这个用例：Ext.util.History。

查看this example以了解其工作原理。 @Wilk分享的链接解释了为什么最好使用#!作为分隔符，而不仅仅是哈希#。

Answer 3

通常＆＃34;网址导航＆＃34;在MVC框架中，通过＆＃34; routes＆＃34;。

实现

在sencha市场中查看以下包裹：https://market.sencha.com/extensions/ext-ux-router

技术上可以使用Ext.util.History解析url锚点（如@Lorenz Meyer所述）：

    Ext.History.on('change', function(token) {
      // parse token and act
    });

另见：

thread on sencha forum有一些解决方案
示例文档http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/history/history.html#main-tabs:tab1:subtab1

使用ExtJS构建的WebApp中的URL导航

3 个答案: