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 !
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
.
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\u003c/code> .
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'
]);
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.