CODEWITHSUNDEEP
javascriptinheritanceextjsgridpanel
Lionel Chan
Lionel Chan

Reputation: 8079

Extjs multiple inheritance?

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!

Upvotes: 5

Views: 5088

Answers (3)

Hernan Payrumani
Hernan Payrumani

Reputation: 161

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

Upvotes: 1

Mchl
Mchl

Reputation: 62395

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'
  ]
}

Upvotes: 6

KomarSerjio
KomarSerjio

Reputation: 2911

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

Upvotes: 0

Related Questions