如何在 MVC 模式中包含 UX 类？

Posted 2023-02-26

【中文标题】如何在 MVC 模式中包含 UX 类？

【英文标题】：How do you include a UX class in the MVC pattern?

【发布时间】：2012-04-25 00:57:20

【问题描述】：

在 MVC 模式之前，我将包含 UX 类，只需将其包含在 JS 的顶部，在 Ext.onReady 之前：

Ext.Loader.setConfig(enabled: true);
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.require([
    'Ext.ux.grid.FiltersFeature'
]);

现在我正在使用 MVC 模式，并且我有一个需要使用相同功能的网格面板。我在视图中包含了一个 requires 语句，如下所示：

Ext.define('ST.view.StudentLog', 
    extend: 'Ext.grid.Panel',
    alias: 'widget.studentlog',
    requires: [
        'Ext.ux.grid.FiltersFeature'
    ],

但应用程序在第一次开始加载时会产生 404 错误。

有什么想法吗？

编辑：

我尝试将相同的代码块放在视图顶部也无济于事（参考Ext.Loader.setConfig / .setPath 块）。

加载器不断尝试从extjs/src/ux/ 加载UX 类，不管我如何尝试告诉它。根据this suggestion，我还尝试在我的应用程序控制器中定义路径属性，但似乎回答者在源代码中看到的任何内容在 4.1 rc3 中都不存在，因为我找不到它并且它不存在没用。

如果我只是将 FilterFeature.js 作为导入的源文件添加到我的 html 中并带有 <script> 标签，那么当我的应用程序启动时，它的所有依赖项都会出现 404 错误。

必须有一种简单的方法将 UX 类直接从 UX 文件夹包含在应用程序中，以便它可以链接到其他 UX 依赖项。

【问题讨论】：

由于这是我google上述问题时的第一个条目，但是Sencha Architect最新的解决方法如下，我想分享链接：How to load external classes in Extjs4 and SA

【参考方案1】：

好的，我是从this post 找到的。

只需要在应用控制器顶部使用Ext.Loader.setPath调用，例如：

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.application(
    name: 'ST',
    autoCreateViewport: true,
    ...

或者您想放置 ux 类的任何位置，出于压缩目的，应将应用特定的 UX 类拉出并放入您自己的文件夹中，例如帖子封面的 app/ux。

【讨论】：

请务必记住在每次迁移到更新版本的 ExtJS 后升级它们。

这是加载单个 js 文件，我们怎样才能像 ext-ux.js 一样在单个文件中像 ext-all.js 一样有缩小版本

【参考方案2】：

Extjs 6，使用 MVVC 和 sencha cmd。我使用 sencha generate 应用程序来启动一个应用程序。 我编码到我想使用ItemSelector 的地步，修改了app.json 以要求在ux 中添加一个块：

"requires": [
  "font-awesome",
  "ux"
],

在我想要创建ItemSelector 小部件的控制器代码中：

requires: [
    'Ext.ux.form.MultiSelect',
    'Ext.ux.form.ItemSelector'
],

以及创建ItemSelector 的相应代码。我遇到的一个问题是，它需要一个带有模型的真实数据存储，而我无法使用模拟数据。

然后我做了一个煎茶应用程序构建

【参考方案3】：

您可以将 Loader 参数组合在一起，使其易于阅读和理解应用程序/文件结构。我相信正在发生的事情是您缺少库文件和应用程序文件所在位置的定义——所有这些都与 app.js 相关。因此，当您加载时，应用程序会尝试使用基于主命名空间路径 (extjs/src) 的文件，而不是应用程序根目录。

Ext.Loader.setConfig(
    enabled : true,
    paths: 
        'Ext'    : 'extjs/src', // library src folder/files
        'MyApp'  : 'app',       // app namespace folder/files
        'Ext.ux' : 'ux'         // extension namespace folder/files
    
);

同样的过程也适用于触摸 - 只需将“extjs”替换为“touch”即可。

如果使用 Architect，您需要选择 Application，添加一个 Loader（配置面板）。这将为 Loader 提供一个可以修改的路径对象。 enabled 选项是一个复选框选项，默认为 true。

编辑： 我没有说清楚的是，在大多数情况下不需要定义库源文件和应用程序文件，尤其是使用文件的默认布局。下面这个 sn-p 通常是足够的：

Ext.Loader.setConfig(
    enabled : true,
    paths: 
        'Ext.ux' : 'ux'
    
);

【参考方案4】：

这听起来像是Ext.ux.grid.FiltersFeature 文件所在路径的问题。您能检查导致 404 的请求的 URL 是什么吗？这应该会为您提供有关将 Ext.ux.grid.FiltersFeature 放置在何处以使其自动加载的线索。

这是我正在使用的目录结构以及 ux 类所在的示例。

js
|---app.js
|
|---app
|    |---controller
|    |---model
|    |---store
|    +---view
|
+---ux
     |---form
     +---layout

基本上，命名空间将遵循目录结构。

【讨论】：

加载器正在 extjs/src/ux 中寻找 UX 类。但我不一定要将所有 ux 类移动到 src 文件夹。没有地方可以将命名空间字符串映射到路径字符串吗？喜欢Ext.ux = app/ux。另请参阅有关进一步尝试的编辑。

【参考方案5】：

在我的情况下（使用ux/DataTip.js），使用 ext-4.2.1.883 和 sencha cmd 4.0.2.67，我能够将Ext.ux 类与提供的解决方案一起使用，使用：

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');

但是sencha app refresh 抱怨：

[ERR] C2008：需求没有匹配的文件（Ext.ux.DataTip）

处理/链接extjs/examples/ux 到extjs/src/ux 解决了我的问题。该应用程序有效，sencha cmd 也能够跟踪事物。通过此复制/链接操作，无需使用Ext.Loader.setPath。只需使用需求中的类：

Ext.define('Demo.Application', 
name : 'Demo',
requires : [ (...), 'Ext.ux.DataTip'],