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!

Mchl · Accepted Answer · 2011-02-08 08:43:34Z

6

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 8, 2011 at 8:43

Mchl

62.4k9 gold badges121 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lionel Chan Over a year ago

PLUGIN! Why I forget its existence!! Thanks for the suggestion :) Will see how will I incorporate it into the framework. Thanks :)

Lionel Chan Over a year ago

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!

Mchl Over a year ago

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.

Lionel Chan Over a year ago

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 :)

Hernan Payrumani · Accepted Answer · 2015-07-05 02:17:23Z

1

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();
     }
 });

answered Jul 5, 2015 at 2:17

Hernan Payrumani

1613 bronze badges

1 Comment

aj go Jan 30 at 3:29

I like this one. just what I need. Thank you for sharing this info!

KomarSerjio · Accepted Answer · 2011-02-08 08:18:57Z

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 8, 2011 at 8:18

KomarSerjio

2,9111 gold badge18 silver badges12 bronze badges

1 Comment

Lionel Chan Over a year ago

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 :)

Collectives™ on Stack Overflow

Extjs multiple inheritance?

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related