Extjs 多重继承？

Posted 2023-02-26

【中文标题】Extjs 多重继承？

【英文标题】：Extjs multiple inheritance?

【发布时间】：2011-02-08 07:49:40

【问题描述】：

我有一个关于 ExtJS 中的多重继承的问题。虽然我知道我可以简单地复制代码来实现它，但我想知道是否有任何方法可以更有效地编写代码。

我的框架中有一个自定义的GridPanel 组件，称为Kore.ux.grid.GridPanel。它扩展了 Ext.GridPanel 的额外通用功能，并为 REST 操作提供接口。

不久之后，我的同事希望EditorGridPanel 也以相同的方式实现，即她希望它是可编辑的，同时能够轻松地执行 REST 操作。

我的问题是，有什么方法可以扩展 Ext.EditorGridPanel 以使用自定义的 Kore.ux.grid.GridPanel 功能？

对于任何语法错误，我深表歉意，如果令人困惑，我可以重新措辞。谢谢！！

编辑

我再次谷歌搜索，我发现线程说这是不可能的。如果我遇到这个问题，我应该遵循什么更好的编码模式吗？

谢谢！

再次编辑

很抱歉，我找到了适合我的结构。这是我发现对我有用的方法：

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

代码来源：http://www.sencha.com/forum/showthread.php?48000-multiple-inheritance&p=228271&viewfull=1#post228271

如果您认为自己有更好的解决方案，请再次提供有用的建议:) 谢谢！

【参考方案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'
  ]

【讨论】：

插件！为什么我忘记了它的存在！！感谢您的建议 :) 将看看我将如何将其合并到框架中。谢谢:)

但这可能不适合我的情况，因为我自定义的 GridPanel 提供了自定义的分页工具栏、预定义的按钮、搜索框、REST... 等。插件可能不是办法:) 无论如何感谢您的建议！

为什么不呢？您可以从插件中访问这些自定义组件，以便将您的功能绑定到它们。毕竟，插件所做的实际上是Ext.apply()，就像你现在做的那样。它只是为此添加了一些更强大且易于使用的 API。

是的，我认为你的应该是答案，因为这是我应该说的最干净的方式。实施，如​​果有什么问题我会把它放在这里！感谢您的输入:)

【参考方案2】：

创建Kore.ux.grid.AbstractGridPanel 作为具有一般功能的基类。并创建两个子类：Kore.ux.grid.GridPanel 和 Kore.ux.grid.EditorGridPanel（具有特定功能）。

【讨论】：

问题是，Ext.grid.EditorGridPanel 扩展了Ext.grid.GridPanel，我提供的 REST“接口”扩展了Ext.grid.GridPanel，因为我需要Ext.grid.EditorGridPanel 中提供的功能，我认为最好的方法是通过编写一个公共基类，并使用公共基类扩展Ext.grid.GridPanel 和Ext.grid.EditorGridPanel。无论如何感谢您的输入:)

【参考方案3】：

我不同意在 Ext 中使用 Plugins 来完成多重继承。插件旨在改变行为或添加新功能。

实现多重继承的正确方法是使用Mixins，请看这个惊人的解释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();
     
 );