Question

我想使用名为Ext.ux.form.ItemSelector的 ExtJs 6组件。

为了测试它的最小功能，我决定创建一个简单的index.html和app.js文件并在我的浏览器中运行它。

但我在浏览器控制台中收到错误：
[E] [Ext.Loader] Some requested files failed to load. ext-all-debug.js:8735:21

这是我的index.html文件：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ItemSelectorThemeSwitchTester</title>


     <script type="text/javascript" src="some/path/ext/6.x/ext-all-debug.js"></script>
     <script type="text/javascript" src="some/path/ext/6.x/packages/ux/classic/ux-debug.js"></script>

    <link rel="stylesheet" type="text/css" href=some/path/ext/6.x/classic/theme-triton/resources/theme-triton-all.css">
    <link rel="stylesheet" type="text/css" href="some/path/ext/6.x/classic/theme-triton/resources/theme-triton-all_1.css">
    <link rel="stylesheet" type="text/css" href="some/path/ext/6.x/classic/theme-triton/resources/theme-triton-all_2.css">


    <script type="text/javascript" src="some/path/ext/6.x/packages/charts/classic/charts.js"></script>
    <script type="text/javascript" src="some/path/ext/6.x/classic/theme-triton/theme-triton.js"></script>
    <script type="text/javascript" src="some/path/ext/6.x/classic/locale/locale-de.js"></script>

    <script type="text/javascript" src="app.js"></script>
</head>

这是我的app.js文件：

Ext.application({
name: 'ItemSelectorThemeSwitchTester',
requires: ['Ext.ux.form.ItemSelector'],
launch: function() {

    var my_array_store = Ext.create('Ext.data.ArrayStore', {
        fields: ['some_value', 'some_text'],
        data: [
            ['1', 'a'],
            ['2', 'b'],
            ['3', 'c'],
            ['4', 'd'],
            ['5', 'e'],
            ['6', 'f'],
            ['7', 'g'],
            ['8', 'h'],
            ['9', 'i'],
            ['10', 'j'],
            ['11', 'k']
        ],
        autoLoad: true
    });

    var my_item_selector_instance = Ext.create("Ext.ux.form.ItemSelector", {
        anchor: '100%',
        fieldLabel: 'ItemSelector',
        imagePath: '../ux/images/',
        store: my_array_store,
        displayField: 'some_text',
        valueField: 'some_value',
        allowBlank: false,
        msgTarget: 'side',
        fromTitle: 'Set of relations',
        toTitle: 'Selected relations',
        scrollable: true,
        height:250
    });

    var my_form_panel = Ext.create("Ext.form.Panel", {
        title: 'ItemSelector Test',
        width: 700,
        bodyPadding: 10,
        height: 400,
        items: [my_item_selector_instance]
    });

    var vp = new Ext.Viewport({
        layout: 'fit',
        items: [my_form_panel],
        autoScroll: true,
        renderTo: Ext.getBody()
    });
}

}）;

我尝试了不同的方法来解决这个错误。我甚至有正在运行 Sencha Fiddle Example。

但我不知道为什么会抛出这个错误？

编辑：

我已将Ext.Loader.setPath('Ext.ux', 'C:/ext-6.0.0-gpl/ext-6.0.0/build/packages/ux/');添加到app.js文件的第一行。

但同样的错误仍然存在。

编辑2：

在@Pawel Glowacz的第二条评论之后，我做了以下事情：

进入ExtJs 6 GPL Files文件夹your\extraction\path\ext-6.0.0\packages\ux\classic\src
将上述文件夹的内容复制到我的项目中my\project\path\libs\ext\ux\
将Ext.Loader.setPath('Ext.ux', 'libs/ext/ux');粘贴到app.js

结果：

仅适用于Internet Explorer和Chrome。
在index.html交换ext-all-debug.js与ext-all.js，然后它在Chrome和Firefox中有效，但在Internet Explorer中无效。

有人知道为什么吗？

Answer 1

运行'sencha package build'时，您需要将软件包指向他们将使用的SDK。

所以在我的情况下：

'c:\Dev\MyApp\'  Is my root
'c:\Dev\MyApp\Ext' is where my Ext instance is located.
'c:\Dev\MyApp\packages\local\package1' is my package.

我需要运行（从我的package1文件夹中）

'sencha -sdk ../../../Ext package build'

现在包知道了EXT组件的位置

ExtJs 6 - 简单应用程序 - Ext.Loader无法加载

编辑：

编辑2：

1 个答案: