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

ExtJs 6 - Simple Application - Ext.Loader fails to load

本文关键字：加载 Loader -Ext 简单 应用程序 ExtJs      更新时间：2023-09-26

我想使用一个名为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示例。

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

编辑：

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

但同样的错误仍然存在。

编辑2：

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

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

结果：

  • 不适用于Internet Explorer和Chrome，仅适用于Firefox
  • 在index.html中，ext-all-debug.js与ext-all.js交换，那么它在Chrome和Firefox中可以工作，但在Internet Explorer中不能工作

有人知道为什么吗

运行"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组件

相关文章：