0

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

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

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

谢谢 ！

4

3 回答 3

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.

于 2016-02-15T17:11:35.187 回答
0

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

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

请参考网格过滤器 Ux中的示例

于 2016-06-11T10:08:56.233 回答
0

我找到了解决方案。

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'
]);
于 2016-02-16T14:33:53.733 回答