Extjs multiple inheritance?

Question

I have a question about multiple inheritance in ExtJS. Although I know that I can simply duplicate the code for this to happen, but I want to know if there is a way to code it more efficiently.

I have a custom component GridPanelin my structure called Kore.ux.grid.GridPanel. It extends Ext.GridPanelwith additional common functions and provides an interface for REST actions.

Soon after, my colleague wanted to EditorGridPanelbe implemented in the same way, that is, she wants him to be editable and at the same time to be able to easily perform REST actions.

My question is: is there a way to expand Ext.EditorGridPanelto use the customized features Kore.ux.grid.GridPanel?

Sorry for any grammatical errors, and I can rephrase it if it is confusing. Thank!!

EDIT

I searched googled again, and I found topics saying this is impossible. Is there any better coding pattern that I should follow if I have this problem?

Thank!

CHANGE AGAIN

So sorry I found a structure that suits me. Here is a method that came in handy:

var Common = function(){}   //abstract class
Ext.apply(Common.prototype, {

    a : function(){},
    b: function(){}...

});

Ext.ux.SomePanelA = Ext.extend ( Ext.Panel, {

    stuff : ............

});

Ext.ux.SomePanelB = Ext.extend ( Ext.Panel, {

    diffStuff : ............

});

Ext.applyIf(Ext.ux.SomePanelA.prototype, Common.prototype);
Ext.apply(Ext.ux.SomePanelB.prototype, Common.prototype);

Code source: http://www.sencha.com/forum/showthread.php?48000-multiple-inheritance&p=228271&viewfull=1#post228271

Please suggest useful suggestions again if you think you have the best solution :) Thank you!

Answer 1

, ExtJS.

/**
 * Boilerplate code taken from 'ExtJS in Action' by Jay Garcia
 */
YourNameSpace.RestGridPlugin = Ext.extend(Object, {
  constructor : function(config) {
    config = config || {};
    Ext.apply(this.config);
  },

  init : function(parent) { //parent argument here, is whatever you apply your plugin to
    parent.on('destroy', this.onDestroy, this);
    Ext.apply(parent, this.parentOverrides);
  },

  onDestroy : function() {
    //here you need to free any resources created by this plugin
  },

  parentOverrides : {
    //here you do your magic (add functionality to GridPanel)
  }

});

Ext.preg('restgridplugin',YourNameSpace.RestGridPlugin); //register your brand ne plugin

someGrid = {
  xtype: 'grid',
  columns: ...
  store: ...
  plugins: [
    'restgridplugin'
  ]
}

someEditorGrid = {
  xtype: 'editorgrid',
  columns: ...
  store: ...
  plugins: [
    'restgridplugin'
  ]
}

Answer 2

Kore.ux.grid.AbstractGridPanel . : Kore.ux.grid.GridPanel Kore.ux.grid.EditorGridPanel ( ).

Answer 3

I disagree with using plugins to do multiple inheritance in Ext. Plugins are designed to change behavior or add new features.

The proper way to achieve multiple inheritance is to use Mixins, please see this amazing explanation of SenchaCon 2011: Sencha class system

 Ext.define('FunctionalityA', {
     methodA: function () {
         ...
     }
 });

 Ext.define('FunctionalityB', {
     methodB: function () {

     }
 });

 Ext.define('MultipleFunctionality', {
     mixins: [
         'FunctionalityA',
         'FunctionalityB'
     ],

     method: function () {
         methodA();
         methodB();
     }
 });