0

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 !

kaycee
  • 901
  • 1
  • 9
  • 35

3 Answers3

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.

Alexander
  • 19,906
  • 19
  • 75
  • 162
  • I'm using ExtJS for webmapping, my javascript source code for my panels are in a file which contains two Ext sections: Ext.require and Ext.application. If i put Ext.ux.colorpick.button in the requires, I get a 404 error... Where should I the requirements ? – kaycee Feb 15 '16 at 17:15
  • If you get a 404, the file is missing, possibly because it was not delivered with your version of ExtJS. Please post relevant parts of your source code and ExtJS version. – Alexander Feb 15 '16 at 17:19
  • Please check whether the file `ext/classic/classic/src/ux/colorpick/Button.js` exists under your working directory. – Alexander Feb 15 '16 at 18:51
  • I don't have any "ux" directory under "src", but I found the file under "ext-6.0.0\packages\ux\classic\src\colorpick" – kaycee Feb 15 '16 at 19:15
  • In that case, you will have to import the package `ux` by adding `"ux"` to `"requires"` in `app.json` in your app's main directory. – Alexander Feb 16 '16 at 10:07
  • I don't have a app.json file because I'm not building a common Ext application. I'm building a website which use ExtJS to add some organisation panel and tools. I have the typical index.html file with a
    container which refers to my ExtJS javascript file described in my first post...
     – kaycee Feb 16 '16 at 13:39
0

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'
]);
kaycee
  • 901
  • 1
  • 9
  • 35
0

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

Shrinath
  • 41
  • 6