How to use plugins in Extjs

Question

I am finding it very difficult to use 'Ext.ux.TabReorderer' as a plugin in tab panel

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

This was throwing an console error saying:

Cannot read property 'init' of null

Upon further investigation found that there is no folder called 'ux' in my extjs. Also a quick search showed me that there is a file named 'Ext.ux.TabReorderer.js' in 'extjs\docs\output' folder.

This is confusing me, how do I add this plugin to my tab panel ?

Edit:

After going through the link provided in the comments by DSF

I added Path in app.js

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

Also changed the tab panel to include

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

It is now giving me new errors :

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)

Do what error message says: Check if there are any syntax errors in the plugin file. Pay special attention to the correct plugin class name. — Saki

Dirty Paradoxx Dirty Paradoxx · Accepted Answer · 2015-05-09T05:56:36

I was finally able to fix it.

I moved TabReorderer.js from extjs\docs\output folder to extjs\src\ux.

The reason this didn't work earlier was because I was providing a class name inside the plugins array.

plugins: ['Ext.ux.TabReorderer']

Where it should have been an instance of that class, as shown below

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

Another way to add plugins would be to use a ptype. For example

plugins: [{ptype: 'cellediting'}]

One can find a list of all the ptypes in Sencha docs

Unfortunately there is no ptype for TabReorderer, so had to stick with Ext.create().

For further reading

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

How to use plugins in Extjs

1 Answers