How to use UX component in ExtJS 6?

Question

I'm trying to use this component: Colorpick button (xtype: colorbutton)

I'm pretty new to ExtJS and I don't know how and where to correctly define this type of button. Where should I put the source code and how should I include it correctly ?

I'm using ExtJS 6.0.0 for a webmapping application. I have the "ext-6.0.0" folder in the directory where I have my web pages so that I can include easily the ext-all.js file.

My main javascript file which contains all my panels has 2 mains components:

Ext.require([
'GeoExt.component.Map',
'GeoExt.data.store.LayersTree',
]);

and

Ext.application({
    name: 'BasicTree',
    launch: function(){

    [... all my code here ...]

  }
})

This file (named panel.js) is included in my index.html file.

Thank you !

Answer 1

It works like every other component. When you want to use a normal button, you would look into the docs, which tell you Ext.button.Button xtype: button, and then you write

Ext.define('MyApp.view.XYZ',{
    extend
    requires:['Ext.button.Button'], // <- defining the requirement to load the file
    items:[{
        xtype:'button' // <- using xtype to get an instance of the component
    }]
    ...

In this case, the docs state Ext.ux.colorpick.Button xtype: colorbutton, so you write

Ext.define('MyApp.view.XYZ',{
    extend: ...
    requires:['Ext.ux.colorpick.Button'], // <- defining the requirement to load the file
    items:[{
        xtype:'colorbutton' // <- using xtype to get an instance of the component
    }]
    ...

For this to work, you have to have the file

<working_dir>/ext/classic/classic/src/ux/colorpick/Button.js

because otherwise the UX component cannot be loaded. UX components are, unlike most other Ext components, not part of ext-all.js.

Answer 2

I found the solution.

1) Copied the content of the directory \ext-6.0.0\packages\ux\classic\src to \ext-6.0.0\ux .

2) Include the Ext directory to the paths of the load in index.html:

Ext.Loader.setConfig({
                enabled: true,
                paths: {
                    'GeoExt': 'src/geoext3-master/src/',
                    'Ext': 'src/ext-6.0.0'
                }

3) Added the required item at the top of my JavaScript file:

Ext.require([
    'GeoExt.component.Map',
    'GeoExt.data.store.LayersTree',
    'Ext.ux.colorpick.Button'
]);

Answer 3

You can set path of ux folder from library in Ext.loader.setPath() method to load js files from ux folder. Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ux');

You have to set this config before Ext.onReady() or Ext.application.

Please refer example at Grid filters Ux