ExtJS 6 configure Ext.ux

Asked 24/7, 2015 at 9:20 Answered 25/11, 2015 at 13:6

Solved javascript extjs extjs6 extjs6-classic

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

Bushire answered 24/7, 2015 at 9:20 Comment(2)

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. – Lucho 24/7, 2015 at 9:45

Yes I use sencha CMD 6 but same error if I don't specify loader config. That why I try to configure it :( – Bushire 24/7, 2015 at 9:56

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.

Lucho answered 24/7, 2015 at 10:9 Comment(2)

how to include it in extjs422 ? – Condyle 18/6, 2020 at 8:8

@Condyle sorry dude I haven't used ExtJS for years, can't remember. But I would go check the examples. – Lucho 18/6, 2020 at 8:27

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

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

Dao answered 24/7, 2015 at 9:57 Comment(1)

how did u get ext-ux-debug file? – Condyle 18/6, 2020 at 8:6

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

Penthea answered 25/11, 2015 at 13:6 Comment(0)

Recommended topics

Hot tags