Question

我正在尝试使用此组件：Colorpick button (xtype: colorbutton)

我是ExtJS的新手，我不知道如何以及在何处正确定义此类按钮。我应该在哪里放source code以及如何正确包含它？

我正在将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。

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之前设置此配置。

请参阅Grid filters Ux

中的示例

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

3 个答案: