web-applications - 使用 ExtJS 构建的 WebApp 中的 URL 导航-6ren

web-applications - 使用 ExtJS 构建的 WebApp 中的 URL 导航

转载作者：行者123 更新时间：2023-12-04 19:15:15

27

4

当您使用 ExtJS(带有 MVC 和 Viewport)开发 Web 应用程序时，通常无法导航:页面中的每个项目(按钮、文本字段、文本区域...)都绑定(bind)到 View Controller 的特定方法.
因此，当您“浏览”应用程序时，原始 URL 始终是相同的并且不会改变。

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

Home | Setup | Archive

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

http://www.mydomain.com/webapp

此时，当有人单击 Home 或 Setup 或 Archive 菜单时，某个 View 会显示到中心区域，并且 URL 应更改为

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

因此，如果我单击设置菜单，地址栏中应显示以下 URL:

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

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

但目前我的 webapp 仍然保留为 ' http://www.mydomain.com/webapp ' 显示请求的 View 。 (例如，MyApp.view.Setup)。

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

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

提前致谢。
威尔克

最佳答案

好的，我自己找到了解决方案: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);
});

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

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

有关详细信息，请参阅:

Anchored based URL navigation

Making AJAX Applications Crawlable

关于web-applications - 使用 ExtJS 构建的 WebApp 中的 URL 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10499595/

27

4

0

文章推荐： asp.net - 使用非 Web 应用程序中的 Asp.Net MVC 路由(测试)

文章推荐： assembly - masm 程序生成的 .lst 文件的内容是什么？

文章推荐： Mercurial如何为repo中的一个文件创建补丁

extjs - 如何更改 extJS 面板内 extJS 文本字段组件的值？
我带着这么简单的问题来到这里，但找不到它......无论如何，你可以在下面看到代码。这是里面有项目的面板。我想要的是更改名称为“intIP”的文本字段的值，它位于面板内部，位于面板内部。我怎样才能做到
extjs - ExtJS 中的面包屑导航
如何在 ExtJS 设计中显示面包屑功能。我正在使用带边框布局的面板，我想在面板顶部设计面包屑功能请寄给我一些 sample ..... 提前致谢最佳答案我想到了两个解决方案。使用面板标题
extjs - EXTJS 中的嵌套网格
你好如何在 ExtJS 中设计嵌套网格请提供一些示例(如何在 ExtJS GridPanel 中使用 RowExpander) 最佳答案尝试这样的事情: //Create the Row Ex
extjs - extjs 类和命名空间的短名称
我有类似的东西 Ext.define('HS.controller.Utility', { statics : { state : 'Oklahoma' } }); 现在我想
extjs - ExtJS 4选择带有复选框标题的多个CheckColumn复选框
我有一列checkcolumn类型来启用切换 bool 值。我希望能够一次为该值切换所有行。理想情况下，我可以在checkcolumn header 中添加一个复选框，并监听更改。那可能吗？我想指出
extjs - extjs 中的更新方法错误
在我的 extjs 项目中，我有一些 panel我要展示的toolbar在 mouseEnter事件。这工作正常。但是当我用新的 html 更新面板时，mouseenter事件不起作用。 panel.
extjs - ExtJs 组合中的图标
如何在 ExtJs Combo 中显示图标和显示字段。extjs 组合是否有任何扩展。请提供一些 sample 。最佳答案对于 ExtJS4，将带有 getInnerTpl 方法的 listCon
extjs - extjs 中具有不同数据类型的相同存储
我有用于网格和柱状图的存储，但值是字符串形式的(服务器端格式化的数量，不能在客户端完成)。由于字符串格式的数量，网格没有被呈现。解决方案可能会使用网格和图表所需的数据类型制作单独的存储。但这是低效的方
extjs - ExtJS GridPanel中的垂直滚动条
我正在一个页面上有一个GridPanel的项目中工作。该面板可以显示任意数量的行，并且我设置了autoHeight属性，这将导致GridPanel扩展以适合行数。我现在想要一个水平滚动条，因为在某些分
extjs - EXTJS 网格中的小数精度
我有一个网格，它允许用户通过编辑行来输入数字。我希望数字支持 4 位小数，但它只支持 2 位。我想出了如何显示 4 位小数，但它没有注册超过 2 位小数。因此，如果用户输入 1000.1111，结果
extjs - 向网格添加工具栏 - Extjs
我这里有以下网格: Ext.define('AM.view.user.List', { extend: 'Ext.grid.Panel', alias: 'widget.userlis
extjs - Extjs 4组合框默认值
我正在将我的应用程序从ExtJs 3迁移到4版本。我的formPanel上有几个组合框，以前我用过hiddenName 以及所有的stuff提交valueField而不是displayField。
extjs - ExtJS 中适合布局的多个项目
我在一个面板中创建了多个项目。现在我想以“适合”布局显示此面板。我不想修复该面板的高度和宽度。我知道“适合”布局只允许显示一项。这里可以使用“适合”布局吗？或者有什么替代方案可以实现这一目标吗？谢
extjs - 将数据库值加载到组合框中 - EXTJS
我需要将数据库值加载到组合框中。我不明白，为什么值没有加载到组合框中。通过 firebug，打印出 console.log 值。这是我的组合框代码， var groups = new Ext.data
extjs - extjs bbar过滤器无法按需工作？
这是将筛选器动态添加到gridpanel底部工具栏的正确语法吗？ this.Grid.getBottomToolbar().plugins=[filters]; 当我这样做时没有错误。但是，它的行为并
extjs - ExtJS:以单独的格式提交日期
我正在使用ExtJS v4.0。在客户端和服务器端之间维护日期格式确实令人困惑。用户需要自己的输入格式，但是服务器通常要求提交为一种标准格式。它应该是ExtJS中的内置实现，但不是。我已经阅读
extjs - 更新编辑行 extjs
我的问题对你来说很容易，但我负担不起..我从行中获取数据并显示在其他面板的字段中我的目标是编辑这些数据并在网格中显示编辑后的数据，请给我一些建议，我知道它需要 commit() 函数但是.. 我的代码
extjs - 为网格制作良好的分页 - extJS
我是 ExtJS 的新手。我遵循了一个教程，目的是在网格上创建分页。代码很简单，我发现它很可疑......结果，分页工具栏在那里，但在第一次加载时仍然显示所有数据。这是我在 View 文件中的代码:
extjs - extjs 是如何独立于浏览器的
听说EXTJS是一个独立于浏览器的javascript库。 extjs 如何使自己独立于浏览器？当我打开库类时，我没有看到任何代码: 如果(IE)//这样做；else if (FF)//做其他事情；
extjs - ExtJS 实例中的静态方法列表
我有一个类的实例(例如 Ext.data.Model)myRecord 并且需要调用它的静态方法之一(例如 getFields())。我该怎么做？最佳答案您还可以使用 self获取类的属性: my

首页

博学

6Ren·AI

商城

web-applications - 使用 ExtJS 构建的 WebApp 中的 URL 导航