5

根据 Sencha 的MVC 应用程序架构指南中的文件结构部分创建一个新的 Ext JS 4.1.1 应用程序我最终得到了这个结构：

/wwwroot
    /myapplication
        /app
            /controller
            /view
        app.js
    /extjs-4.1.1

app.js 文件包含：

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    appFolder: '/myapplication/app',
    autoCreateViewport: true,
    name: 'MyApplication',
    controllers: [
        ...
    ]
});

一切都好。然后我将 app.js 包含在我的服务器端MVC 应用程序中输出（不要与客户端Ext JS MVC 结构混淆）。服务器端应用程序使用的语言和结构对于这个问题并不重要，但输出的结果才是。在开发中，应用程序的 URL 为：

http://servername/someidentifier1/someidentifier2

与许多应用程序一样，mod_rewrite 用于赋予标识符以意义并将 URL 映射到服务器端代码。这些标识符不映射到“物理”目录。这个 URL 的输出是：

<!DOCTYPE html>
<html>
<head>
<title>MyApplication</title>
<link href="/extjs-4.1.1/resources/css/ext-all-debug.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/extjs-4.1.1/ext-debug.js"></script>
<script type="text/javascript" src="/myapplication/app.js"></script>
</head>
<body>
</body>
</html>

Ext JS 不在默认推荐位置，即 /wwwroot/myapplication/extjs-4.1.1，而是上一级，因为它在多个应用程序之间共享。如果您回头查看上面的 app.js，您还会注意到需要设置 appFolder 设置才能使其与“不存在”的 URL 一起使用。

这一切在开发中都可以正常工作，但下一步是使用Sencha SDK 工具生成代码的“构建” （问题基于 Windows 的 2.0.0 Beta 3 版本）。这就是它出错的地方。我采取以下步骤：

  1. 命令行我进入 /wwwroot/myapplication 目录。
  2. 我执行sencha create jsb -a http://servername/someidentifier1/someidentifier2 -p myapplication.jsb3生成一个 jsb3 文件。
  3. 我执行sencha build -p myapplication.jsb3 -d .

构建失败。在这种情况下，因为它试图在路径 c:\...\myapplication\myapplication\app\controller 中找到例如控制器的自定义代码：当前路径 + appFolder 设置。您会假设运行它更高一级会更好，但是它找不到（共享）extjs-4.1.1 目录。

我猜想时间会让 Ext JS MVC 结构和 SDK Tools 更加灵活，不推荐稍微偏离默认结构。都可以接受，但另一方面：将 Ext JS 4.x（以 MVC 方式的 Ext JS）与 URL 重写（mod_rewrite）集成也必须是一种非常普遍的做法吗？

任何建议的工作设置/结构都将受到高度赞赏。

目标应该是：

  • 无需手动编辑 jsb3 文件。
  • 将 extjs-4.1.1 目录保持在顶层以在应用程序之间共享。
  • 没有 app.html 文件，因为它从未在服务器端 MVC 应用程序中使用，否则需要手动更新。
  • 一个不错的附加功能是将 app.js 的内容包含在服务器端生成的 HTML 中，因为这样它就能够接收动态生成的参数。
4

3 回答 3

0

夫妇的事情。

首先 - 您不需要在加载器中为 ExtJs 库和您的应用程序指定绝对路径。

...
appFolder: 'app' // should be enough
...

其次 - 至于构建和生产之间的差异 - 我最终有两个 .html 文件 - index.html 和 index-dev.html。这些文件不会被更改（一旦您设置它们），因此保持它们同步不是问题。

您使用 index-dev.html 来满足您的开发需求、调试以及构建过程。基本上这个文件是为你的本地开发环境配置的。

index.html 仅使用您的 app.js 的组合和缩小版本，并配置用于生产部署。

于 2012-07-29T15:13:35.850 回答
0

使用 mod rewrite，您可以使用 Symfony 中稍作修改的 .htaccess 文件

<IfModule mod_rewrite.c>
    RewriteEngine On

    #<IfModule mod_vhost_alias.c>
    #    RewriteBase /
    #</IfModule>

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>

这个文件让你

  • 如果它们是真实文件（css、js、图像等），则从服务器获取资源
  • 如果服务器文件系统上没有匹配项，则将 url 部分转换为查询参数。

这应该适用于您的设置，只需将 app.php 行更改为您的应用程序入口点

对于目录设置，你的很好，只是几件事：

  • 您的 SDK 工具已过时，因为您可以下载： http ://www.sencha.com/products/sencha-cmd/download/ (v3.0.0)

  • 按照http://docs.sencha.com/ext-js/4-1/#!/guide/command上的文档，您可以使用所需的类获得“构建”，但最后还是您手动在开发之间切换/ 生产 javascript 文件，或者您在代码中使用环境变量进行切换。

  • 实际上，我认为您可以在构建目录中使用“假” index.html 来通过构建工具进行修改，然后在生产代码中您可以模仿 sencha build 生成的代码。

于 2012-11-28T07:59:27.163 回答
0

创建一个 index.html 文件来生成项目文件将是一种方法。我还发现 sencha 架构师非常死板且难以使用。最烦的是我无法使用外部编辑器来编辑生成的代码。一切都必须在设计器中完成，如果设计器能够提供我需要的所有功能，那就很好了。但它不能。

于 2013-04-14T01:44:01.190 回答