在 Visual Studio 中将 extjs 5 应用程序构建与 sencha cmd 和 WebAPI 集成

Question

我是 ExtJs 新手，想将使用 Sencha CMD 创建的 ExtJs 5 应用程序集成到 WebAPI 应用程序中！

我为 BUILD 模式进行了集成，但没有为 DEVELOPMENT 模式进行集成。

关于这个post 集成步骤如下图！

• 步骤 1. 创建路径：C:\VCProject\SVCodeCampWeb\WebAPI

• 第 2 步。在第 1 步的目录中创建名为“API_NAME”的 WebAPI 项目。

• 步骤 3. 将 ExtJS 5 框架 (ext-5.0.0) 移至步骤 1 的目录。

• 步骤 4. 使用 sencha cmd 生成 extjs 应用程序：

  C:\VCProject\SVCodeCampWeb\WebAPI\ext-5.0.0>sencha generate app MyApp C:\VCProject\SVCodeCampWeb\WebAPI\API_NAME\API_NAME\CMDBUG1

• 第 5 步。通过解决方案资源管理器将 ext 应用程序包含到 Web Api。

• 步骤 6. 使用 sencha cmd 构建应用程序，如下所示：

  C:\Users\albert\Documents\Visual Studio 2013\Projects\BMSIA\BMSIA.Web\BMSJS>sencha app build

工作！ 这些是我包含在 BUILD 模式的 WebAPI 的 _Layout.chtml 中并且有效的文件！

<script src="~/CMDBUG1/build/production/MyApp/app.js"></script>
<link href="~/CMDBUG1/build/production/MyApp/resources/MyApp-all.css" rel="stylesheet" />

错误部分！！！

对于开发模式，我包括以下文件：

< link href="~/CMDBUG1/build/production/MyApp/resources/MyApp-all.css" rel="stylesheet" />

< script src="~/CMDBUG1/ext/ext-all.js"></script>

< script src="~/CMDBUG1/app.js"></script>

但它抛出了这个错误：

TypeError: Ext.application is not a function

如果您需要更多详细信息，请告诉我！

任何帮助将不胜感激！

Answer 1

不需要将 .js 和 .css 设置为 _Layout.cshtml。当您使用 Sencha CMD 构建应用程序时，您会获得 index.html、app.js、resources/App-all.css 和一些图像。这里的目标是这个应用程序可以在应用程序域（或其他域，如果应用了 CORS）的任何地方工作。 Web Api 将提供您的应用将调用的 URI。这样，即使客户端应用程序（extjs）与服务器（webapi）在同一个项目中，您也可以将它们解耦。如果您为应用程序提供不同的 webapi，那么整个事情都会起作用。要记住的一件事是 baseUri。在您开发时，它将是http://localhost:xxxx，而在部署应用程序时，它将是http://www.somedomain.com。我使用简单的单例类来设置我的开发和生产路径。这是必要的，因此来自 m​​odels/stores/ext.ajax 的 ajax 调用具有到您的 api 的有效路径。 总体目标是解耦客户端和 webapi。 您可以将构建的应用程序放在 /app 文件夹中，并将您的 extjs 代码保存在 /source 文件夹中，然后您可以将其排除在发布之外。

Ext.define('MyApp.config.AppConfig', {
    statics: {
        path: 'http://localhost:8888'
        //path: 'http://client1.azurewebsites.net',
        //path: 'http://client2.azurewebsites.net'
    }
});

然后在调用 api 时说：url:MyApp.config.AppConfig.path + /users/list。这当然可以很好地完成。