如何在ExtJS 6中使用UX组件？

Question

我正在尝试使用此组件：Colorpick按钮（xtype：colorbutton）

我对ExtJS很陌生，我不知道如何以及在哪里正确定义这种类型的按钮。 我应该在哪里放置源代码 ，如何正确包含它？

我正在将ExtJS 6.0.0用于Webmapping应用程序。 我在拥有网页的目录中具有“ ext-6.0.0”文件夹，以便可以轻松包含ext-all.js文件。

我的主要javascript文件（包含所有面板）具有2个主要组件：

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

和

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

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

  }
})

这个文件（名为panel.js）包含在我的index.html文件中。

谢谢 ！

Answer 1

它的工作原理与其他所有组件一样。 当您想使用普通按钮时，可以查看文档，其中告诉您Ext.button.Button xtype: button ，然后编写

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
    }]
    ...

在这种情况下，文档状态为Ext.ux.colorpick.Button xtype: colorbutton ，因此您编写

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
    }]
    ...

为此，您必须拥有文件

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

因为否则无法加载UX组件。 与大多数其他Ext组件不同，UX组件不是ext-all.js一部分。

Answer 2

我找到了解决方案。

1）将目录\\ext-6.0.0\\packages\\ux\\classic\\src的内容复制到\\ext-6.0.0\\ux\u003c/code> 。

2）将Ext目录包括在index.html中的加载路径中：

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

3）在我的JavaScript文件顶部添加了必填项：

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

Answer 3

您可以在Ext.loader.setPath()方法中的库中设置ux文件夹的路径，以从ux文件夹加载js文件。 Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ux');

您必须在Ext.onReady（）或Ext.application之前设置此配置。

请参考网格过滤器示例Ux