javascript - Extjs multiple inheritance? - Stack Overflow

admin管理员组

文章数量:1356224

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 ponent in my framework, called Kore.ux.grid.GridPanel. It extends Ext.GridPanel with extra mon 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: .php?48000-multiple-inheritance&p=228271&viewfull=1#post228271

Please again provide useful suggestions if you think you have a better solution :) Thanks!

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 ponent in my framework, called Kore.ux.grid.GridPanel. It extends Ext.GridPanel with extra mon 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./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!

• javascript
• inheritance
• extjs
• gridpanel

Share Improve this question Follow edited Feb 8, 2011 at 7:57 Lionel Chan asked Feb 8, 2011 at 7:49 Lionel ChanLionel Chan 8,07955 gold badges4242 silver badges7070 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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'
  ]
}

I don't agree with using Plugins to acplish 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();
     }
 });

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

本文标签： javascriptExtjs multiple inheritanceStack Overflow