用WebApp构建ExtJS中的Url导航

Question

当您使用ExtJS开发web应用程序(带有MVC和视图端口)时，通常不可能导航:页面中的每个项目(按钮、文本字段、文本区域、.)绑定到视图控制器的特定方法。因此，当您在应用程序中“旅行”时，原始URL总是相同的，并且不会改变。

现在，以一个包含以下按钮的标题菜单栏的应用程序为例：

Home | Setup | Archive

应用程序的原始URL如下所示：

http://www.mydomain.com/webapp

此时，当有人单击Home或Setup或Archive菜单时，某个视图将显示在中心区域，URL应在

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

因此，如果我单击“安装”菜单，应在地址栏中显示以下URL：

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

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

但目前，我的webapp仍然停留在“http://www.mydomain.com/webapp”中，显示请求的视图。(例如MyApp.view.Setup)。

--这就是重点:我如何使用ExtJS导航开发一个webapp (使用ExtJS、MVC和Viewport)？是否可以不将javascript/html代码嵌套到其他PHP/Ruby/Python/$RANDOM_SERVER_LANGUAGE中呢？(我想在服务器端拆分客户端)

这方面的一个实现已经存在:它是http://docs.sencha.com/ext-js/4-1/#!/api。如果我是对的，没有服务器端应用程序或.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请求加载所请求的资源。然后，使用响应(可能是HTML代码或JSON、XML等)修改某个容器(例如div )。

然而，这件事必须用像Apache这样的服务器web来完成，但是没有服务器应用程序:实际上，每个资源都可以是一个纯HTML文件，并且不需要服务器应用程序来服务这些文件。

欲了解更多详情，见：

1. 基于锚定的URL导航
2. 使AJAX应用程序可爬行

Answer 2

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

看看这个例子，看看它是如何工作的。@Wilk共享的链接解释了为什么最好使用#!作为分隔符，而不仅仅是散列#。

Answer 3

通常，MVC框架中的"url导航“是通过”路由“实现的。

查看sencha市场的以下软件包：https://market.sencha.com/extensions/ext-ux-router

从技术上讲，url锚可以使用Ext.util.History解析(如@Lorenz在这里指出)：

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

另请参阅：

• sencha论坛的帖子的几种解决方案
• 在sencha docs http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/history/history.html#main-tabs:tab1:subtab1中的示例