Wil*_*ilk 5 client-server extjs web-applications client-side restful-url
当您使用ExtJS(使用其MVC和Viewport)开发Web应用程序时,通常无法导航:页面中的每个项目(按钮,文本字段,textareas,...)都绑定到视图控制器的特定方法.因此,当您"浏览"应用程序时,原始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
此外,如果我从另一个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文件.他们是怎么做到的？
提前致谢.威尔克
好的，我自己找到了解决方案：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 这样的服务器网络来完成，但不需要服务器应用程序：事实上，每个资源都可以是纯 HTML 文件，并且不需要服务器应用程序来提供这些文件。
有关更多详细信息，请参阅：
| 归档时间： |
|
| 查看次数： |
5753 次 |
| 最近记录： |