Here is a short instruction for the correct creation of overrides, which nevertheless guarantee a certain updateability. Usually we collect all overrides for custom overrides in a single file, but you can of course split them up thematically.

There are two use cases to adjust existing Xeditor plugins. The first one is to just add or change single functionalities. The second one would be to create a new plugin based on an existing Xeditor plugin but with your own functionalities.

Adjusting single functionalities of a plugin

If you just want to adjust some functionalities of a plugin, best practice would be the following:

Ext.override(Ext.ux.xeditor.Element, { // name of the class you want to overwrite
  prepareForFrame: function() { // name of the overwriting method; please also mention every argument of the method again!
    this.callParent(arguments); // call original logic; could also be after your custom logic

    // CUSTOM CODE
 }
});

Creating new plugins on the basis of existing

On the other hand, if you want to create new plugins based on an existing plugin, proceed as follows:

1. Create a new JS file for the new plugin.

2. Insert the following (customized) code:

Ext.define('Ext.ux.samplecompany.plugin.NewPlugin', { // name of the plugin
 extend: 'Ext.ux.xeditor.plugin.Footnote', // use the old plugin as a basis
 alias: 'plugin.uxsamplecompanynewplugin',

 newMethodA: function() { // define new methods here
     // some code
 },

 newMethodB: function() {
     // some code
 },

 prepareForFrameAfter: function(element) { // also extend or overwrite existing ones as in the first example
     this.callParent(arguments);
     // CUSTOM CODE
 }
});

The new plugin has all methods of the basic plugin due to the extension.