如何在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