ExtJS 6 配置 Ext.ux

Question

我正在尝试使用 ext/packages/ux/classic/src/colorpicker 下的颜色选择器所以我设置了我的要求：

requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',


        'ThemeDemoApp.view.main.MainController',
        'ThemeDemoApp.view.main.MainModel',
        'ThemeDemoApp.view.main.List',
        'Ext.slider.Single',
        'Ext.ux.colorpick.Button'
    ]

在 app.js 的顶部，我设置为：

Ext.Loader.setConfig({                enabled : true,
                paths   : {
                        'Ext.ux' : 'ext/packages/ux/classic/src'
                } 
        });

但它不起作用我有：加载资源失败：服务器响应状态为 404（未找到） http://localhost:1841/ext/classic/cl...=1437726506841

它不需要我的加载程序配置。如何正确配置 Ext.ux？

谢谢

Answer 1

这就是我配置使用 Ext.ux 的 Web 应用程序的方式。看一看：

如您所见，我在 webapp 中添加了 ext-ux 文件夹，其中包含 所有我感兴趣的 源。在 app.js 中我添加了：

Ext.Loader.setPath('Ext.ux', 'extjs/ext-ux/src/ux');

在 index.jsp 我添加了：

<head>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="extjs/ext-ux/ext-ux-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

当然，路径会根据您的配置而改变。

以及展示如何使用它的示例：

Ext.define('ScuWeb.ScuWebApp', {
    extend: 'Ext.ux.desktop.App',

    requires: [
        'Ext.window.MessageBox',
        'Ext.ux.desktop.ShortcutModel'
    ],

Answer 2

确保您的 app.json 需要 ux:

"requires": [
    // ...
    "ux"
]

此外，由于您使用的是 Sencha CMD，因此无需担心 Ext.Loader。

Answer 3

对于EXT Js，使用Sencha CMD，添加requires [...,"ux"]即可。

ExtJS 6 配置 Ext.ux

ExtJS 6 configure Ext.ux

javascript

extjs

extjs6

extjs6-classic