Extjs multiple inheritance?

Question

I have a question regarding multiple inheritance in ExtJS. While I know I can simply duplicate the code to make it happens, but I want to know if there is any way to code it more efficiently.

I have a customized GridPanel component in my framework, called Kore.ux.grid.GridPanel. It extends Ext.GridPanel with extra common functionalities and provides interface for REST actions.

Soon later, my colleague wanted to have EditorGridPanel to be also implemented in the same manner, ie, she wants it to be editable, and at the same time, have the ability to do REST actions easily.

My question is, is there any way I can extend Ext.EditorGridPanel to take up the customized Kore.ux.grid.GridPanel functionalities?

Sorry for any grammar errors and I can rephrase it if it's confusing. Thanks!!

EDIT

I googled again, and I found threads saying it's impossible. Is there any better coding pattern I should follow if I have this problem?

Thanks!

EDIT AGAIN

So sorry I found the structure that suits me.. Here is the method I found useful to me:

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 again provide useful suggestions if you think you have a better solution :) Thanks!

score 5 · Accepted Answer · answered Feb 08 '11 at 08:43

5

What you really need to look into, are ExtJS plugins.

/**
 * 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

Usage

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

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

answered Feb 08 '11 at 08:43

Mchl

61,444
9
118
120

PLUGIN! Why I forget its existence!! Thanks for the suggestion :) Will see how will I incorporate it into the framework. Thanks :) – Lionel Chan Feb 08 '11 at 08:46
But this might not suits my case as my customized GridPanel provides customized pagingToolbar, predefined buttons, search box, REST... etc. Plugin might not be the way :) Thanks for the suggestion anyway! – Lionel Chan Feb 08 '11 at 08:51
Why not? You can access these custom components from within the plugin in order to bind your functionality to them. After all, what the plugin does is in fact `Ext.apply()` just the way you do it now. It just adds a bit more robust and easy to use API for that. – Mchl Feb 08 '11 at 08:54
Yea I think yours should be the answer since it's the cleanest way I should say. Implementing, if anything wrong I will put it here!. Thanks for the input :) – Lionel Chan Feb 09 '11 at 01:44

score 0 · Answer 2 · answered Jul 05 '15 at 02:17

I don't agree with using Plugins to accomplish multiple inheritance in Ext. Plugins are intended to changed behaviour or add new functionality.

The right way to achieve multiple inheritance is by using Mixins, please watch this amazing explanation SenchaCon 2011: The Sencha Class System

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

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

     }
 });

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

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

score 0 · Answer 3 · answered Feb 08 '11 at 08:18

0

Create Kore.ux.grid.AbstractGridPanel as base class with general functionality. And create two child classes: Kore.ux.grid.GridPanel and Kore.ux.grid.EditorGridPanel (with specific functionality).

answered Feb 08 '11 at 08:18

KomarSerjio

2,861
1
16
12

The thing is, `Ext.grid.EditorGridPanel` extends `Ext.grid.GridPanel`, the REST "interface" I provided is extending `Ext.grid.GridPanel`, and because I need functionalities provided in `Ext.grid.EditorGridPanel`, I think the best way is by writing a common base class, and extend both `Ext.grid.GridPanel` and `Ext.grid.EditorGridPanel` with the common base class. Thanks for the input anyway :) – Lionel Chan Feb 08 '11 at 08:24

Extjs multiple inheritance?

3 Answers3