如何在 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'
    }]
});

这引发了一个控制台错误：

无法读取 null 的属性“init”

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

这让我很困惑，如何将这个插件添加到我的标签面板？

编辑：

通过 DSF 在 cmets 中提供的链接后

我在 app.js 中添加了路径

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

还更改了标签面板以包含

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

它现在给了我新的错误：

1) 未捕获的 TypeError: Ext.data.JsonP.Ext_ux_TabReorderer 不是 函数（TabReorderer.js）

2) 未捕获的错误：以下类未声明，即使 他们的文件已加载：'Ext.ux.TabReorderer'。请检查 可能的拼写错误对应文件的源代码： './app/ux/TabReorderer.js (ext-all-dev.js)

Answer 1

我终于能够修复它。

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

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

plugins: ['Ext.ux.TabReorderer']

它应该是一个该类的实例，如下所示

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

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

plugins: [{ptype: 'cellediting'}]

可以在Sencha docs中找到所有ptypes的列表

不幸的是，TabReorderer 没有 ptype，所以不得不坚持使用 Ext.create()。

进一步阅读

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