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

【问题标题】：How to use UX component in ExtJS 6?如何在 ExtJS 6 中使用 UX 组件？
【发布时间】：2016-02-15 17:04:07
【问题描述】：

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

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

我将 ExtJS 6.0.0 用于 web 映射应用程序。我在我的网页所在的目录中有“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 文件中。

谢谢！

【问题讨论】：

标签： javascript extjs extjs4 extjs6 geoext

【解决方案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 的一部分。

【讨论】：

我正在使用 ExtJS 进行网络映射，我的面板的 javascript 源代码位于一个包含两个 Ext 部分的文件中：Ext.require 和 Ext.application。如果我将 Ext.ux.colorpick.button 放在要求中，我会收到 404 错误...我应该在哪里要求？
如果您收到 404，则该文件丢失，可能是因为您的 ExtJS 版本未提供该文件。请发布您的源代码和 ExtJS 版本的相关部分。
请检查您的工作目录下是否存在ext/classic/classic/src/ux/colorpick/Button.js文件。
我在“src”下没有任何“ux”目录，但是我在“ext-6.0.0\packages\ux\classic\src\colorpick”下找到了文件
在这种情况下，您必须通过在应用程序主目录的app.json 中添加"ux" 到"requires" 来导入包ux。

【解决方案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'
]);

【讨论】：

【解决方案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的例子

【讨论】：