如何在 Extjs 中使用插件

Question

我发现很难将 'Ext.ux.TabReorderer' 用作选项卡面板中的插件

Ext.define("practical.view.Board",{
    extend: 'Ext.tab.Panel',
    alias: 'widget.board',
    plugins: ['Ext.ux.TabReorderer'],
    items:[{
        title: 'Tab 1'
    },{
        title: 'Tab 2'
    }]
});

这是抛出一个控制台错误：

Cannot read property 'init' of null

进一步调查发现我的extjs中没有名为'ux'的文件夹。另外，快速搜索显示 'extjs\docs\output' 文件夹中有一个名为 'Ext.ux.TabReorderer.js' 的文件。

这让我很困惑，如何将此插件添加到我的选项卡面板？

编辑：

通过 DSF

评论中提供的 link

我在app.js

中添加了路径

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': './app/ux'
    }
});

还更改了选项卡面板以包含

Ext.require(['Ext.ux.TabReorderer']);
Ext.define("practical.view.Board",{...
...

它现在给我新的错误:

1) Uncaught TypeError: Ext.data.JsonP.Ext_ux_TabReorderer is not a function (TabReorderer.js)

2) Uncaught Error: The following classes are not declared even if their files have been loaded: 'Ext.ux.TabReorderer'. Please check the source code of their corresponding files for possible typos: './app/ux/TabReorderer.js (ext-all-dev.js)

Answer 1

我终于能够修复它。

我将 TabReorderer.js 从 extjs\docs\output 文件夹移动到 extjs\src\ux。

这之前不起作用的原因是因为我在插件数组中提供了一个 class 名称。

plugins: ['Ext.ux.TabReorderer']

它应该是 class 的 实例，如下所示

plugins: [Ext.create('Ext.ux.TabReorderer')]

另一种添加插件的方法是使用 ptype。例如

plugins: [{ptype: 'cellediting'}]

可以在 Sencha docs
中找到所有 ptype 的列表
不幸的是 TabReorderer 没有 ptype，所以不得不坚持使用 Ext.create()。

进一步阅读

http://www.sencha.com/blog/using-plugins-and-mixins-in-your-sencha-apps/

如何在 Extjs 中使用插件

How to use plugins in Extjs

extjs4.2