8

I'm trying to use the color picker under ext/packages/ux/classic/src/colorpicker So I set my requires : 

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

And at the top of app.js, I set this : 

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

But it's not working I have : Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:1841/ext/classic/cl...=1437726506841

It doesn't take my loader configuration. How can I configure Ext.ux correctly ?

Thanks

Guilherme Lopes
  • 4,688
  • 1
  • 19
  • 42
jaumard
  • 8,202
  • 3
  • 40
  • 63
  • I guess you are using Sencha CMD (because of localhost:1841), in which case there is no need to configure `Ext.Loader`. Merely specifying `Ext.ux.colorpick.Button` in the `requires` declaration should work. – Greendrake Jul 24 '15 at 09:45
  • Yes I use sencha CMD 6 but same error if I don't specify loader config. That why I try to configure it :( – jaumard Jul 24 '15 at 09:56

3 Answers3

11

Make sure that your app.json requires ux:

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

Also, as you are using Sencha CMD there is no need to worry about Ext.Loader.

Greendrake
  • 3,657
  • 2
  • 18
  • 24
1

This is how i configured my web application that uses Ext.ux. Take a look: enter image description here

As you can see i added ext-ux folder with all interested for me sources inside webapp. In app.js i added:

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

In index.jsp i added: 

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

Of course paths will change depends on your configuration.

And example to show how to use it:

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

    requires: [
        'Ext.window.MessageBox',
        'Ext.ux.desktop.ShortcutModel'
    ],
Paweł Głowacz
  • 2,926
  • 3
  • 18
  • 25
0

With EXT Js, using Sencha CMD, adding requires [...,"ux"] is sufficient.

pkrav
  • 1