CODEWITHSUNDEEP
javascriptextjs
kiltek
kiltek

Reputation: 3211

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

I want to use an ExtJs 6 component which is called Ext.ux.form.ItemSelector.

To test its minimal functionality I decided that it would be appropriate to create a simple index.html and app.js file and run it in my browser.

But i get an error in my browser console:
[E] [Ext.Loader] Some requested files failed to load. ext-all-debug.js:8735:21

This is my index.html file: 

<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>

This is my app.js file:

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()
    });
}

});

I have tried different things to get around this error. I even have a running Sencha Fiddle Example.

But I dont know why it does throw this error?

Edits:

I have added Ext.Loader.setPath('Ext.ux', 'C:/ext-6.0.0-gpl/ext-6.0.0/build/packages/ux/'); to the first line in the app.js file.

But the same error remains.

Edits 2:

After the second comment of @Pawel Glowacz I have done the following:

  1. Go into the ExtJs 6 GPL Files folder your\extraction\path\ext-6.0.0\packages\ux\classic\src
  2. Copy the contents of the aforementioned folder into my project into the folder my\project\path\libs\ext\ux\
  3. Paste Ext.Loader.setPath('Ext.ux', 'libs/ext/ux'); into the first line of app.js

Results:

Does someone know why?

Upvotes: 2

Views: 6300

Answers (1)

TolMera
TolMera

Reputation: 416

When running 'sencha package build' you need to point packages to the SDK that they will be using.

So in my case:

'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.

I need to run (from within my package1 folder)

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

Now the package knows where to locate your EXT components

Upvotes: 1

Related Questions