Is there any standard practice when it comes to adding plugin into ExtJs 4.1 apps

Question

I am going to add a plugin to my ExtJs 4.1 application. Currently I have added the code for plugin into one of the file where I am making use of the plugin and everything is working fine.

Alternatively I can put the plugin code in a JS file and then can make reference of the file in my application.

But I was wondering is there way to include the plugin without making explicit reference? Just like we load Controllers, store etc in ExtJs 4.1

score 0 · Answer 1 · answered Aug 28 '13 at 13:51

There is no standard practice, but in my opinion it makes the most sense to define a namespace for plugins (e.g., App.plugin.MyPlugin) and load them either explicitly as needed, or along with your other required files if you're using the Ext.Loader.

Here is an example...

Ext.define("App.plugin.MyPlugin", {
    /** Any explicit class properties and methods for functionality go here.
        Eg. extending, aliasing, defining initComponent to add events, and
        any other class-specific methods. */
},

function(){
    Ext.ns("App.plugin");
    App.plugin.MyPlugin = {}; // this is a global
    var MyPlugin = App.plugin.MyPlugin;

    /** You can modify the prototype here */
    this.prototype.dateFormat = Ext.Date.dateFormat;

    /** If you need to add functionality from some other class,
    or Ext class, you can marge them here. In this example,
    I am adding in the methods from Ext.util.Format */
    Ext.apply(MyPlugin, Ext.util.Format);

    /** Define methods which can be invoked from the global */
    Ext.apply(MyPlugin, {
        exampleRenderer: function(val){
            return MyPlugin.ucfirst(val); // available via Ext.util.Format
        }
    });
});

Now you can instantiate the plugin class, but also access the global methods. For example, you can leverage the exampleRenderer in a gridcolumn renderer via App.plugin.MyPlugin.exampleRenderer.

To automatically load your plugin, you must define the path for the namespace in your `Loader' configuration. e.g.,

Ext.Loader.setConfig({
    enabled: true, 
    paths : {
        'App.plugin': '/js/app/plugin/' // or however your folder structure is
    }
});

/** then require it.. */
Ext.require([
    'App.plugin.MyPlugin'
]);

You likely do not want to combine the two principals into one class, but I just wanted to show a couple different means to achieve your goal.

Is there any standard practice when it comes to adding plugin into ExtJs 4.1 apps

1 Answers1