5

当您使用 ExtJS（及其 MVC 和视口）开发 Web 应用程序时，通常无法导航：页面中的每个项目（按钮、文本字段、文本区域...）都绑定到视图控制器的特定方法. 因此，当您“浏览”应用程序时，原始 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）。

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

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

提前致谢。威尔克

4

3 回答 3

3

好的，我自己找到了解决方案：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 应用程序可抓取
于 2012-05-11T11:14:14.003 回答
2

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

查看此示例以了解其工作原理。@Wilk 共享的链接解释了为什么最好#!用作分隔符，而不仅仅是 hash #。

于 2014-03-20T09:50:49.877 回答
0

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

在 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
    });

也可以看看：

于 2014-05-30T02:56:28.713 回答