Extjs 将项目添加到扩展类答案

【问题标题】：Extjs add item to extended classExtjs 将项目添加到扩展类
【发布时间】：2015-09-01 06:28:30
【问题描述】：

使用 Extjs 5 我正在定义我的自定义工具栏：

Ext.define('Core.toolbar.view.ToolbarView',
{
        extend: 'Ext.toolbar.Toolbar',

        dock: 'top',
        items: [
        {
                xtype: 'button',
                text: 'add'
        },
        {
                xtype: 'button',
                text: 'remove'          
        }]

});

现在我想使用它：

Ext.define('MyApp.view.ToolbarView',
{
        extend: 'Core.toolbar.view.ToolbarView',

        items: [
        {
                xtype: 'button',
                text: 'ADDING AN OTHER BUTTON'
        }]

});

Ext.create('MyApp.view.ToolbarView');

使用items 属性，我用新项目覆盖旧项目，但我不想这样做。我想添加第三个按钮。

有可能吗？

【问题讨论】：

标签： javascript extjs extjs5

【解决方案1】：

我会使用initComponent，像这样（example）：

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('Core.toolbar.view.ToolbarView', {
      extend: 'Ext.toolbar.Toolbar',

      dock: 'top',
      items: [{
        xtype: 'button',
        text: 'add'
      }, {
        xtype: 'button',
        text: 'remove'
      }]

    });

    Ext.define('MyApp.view.ToolbarView', {
      extend: 'Core.toolbar.view.ToolbarView',
      initComponent: function() {

        this.callParent();
        this.add({
          xtype: 'button',
          text: 'ADDING AN OTHER BUTTON'
        });
      }

    });

    Ext.create('MyApp.view.ToolbarView', {
      renderTo: Ext.getBody()
    });

    Ext.create('MyApp.view.ToolbarView', {
      renderTo: Ext.getBody()
    });
  }
});

【讨论】：

每次创建 MyApp.view.ToolbarView 组件时，都会使用您的解决方案添加一个新按钮。因此，如果我创建 10 个组件，我会看到 10 个“添加另一个按钮”文本。您可以通过添加 Ext.create('MyApp.view.ToolbarView', { renderTo: Ext.getBody() }); 来尝试它在你的小提琴中
对此感到抱歉...再次检查小提琴以获取更新版本。（这就是为什么有时你不会弄乱私有变量）

【解决方案2】：

您可以在核心工具栏上使用onClassExtended 并设置onBeforeCreated 挂钩，例如：

onClassExtended: function (cls, data, hooks) {
    var onBeforeClassCreated = hooks.onBeforeCreated,
        Cls = this,
        xArray = Ext.Array;

    hooks.onBeforeCreated = function (clss, dataa) {

        dataa.items = xArray.from(Cls.prototype.items).concat(xArray.from(dataa.items));

        onBeforeClassCreated.call(this, clss, dataa, hooks);

    };
}

工作示例：https://fiddle.sencha.com/#fiddle/t3i

【讨论】：

不错的把戏，确实做到了提问者想要的。但从前瞻性的角度来看，他们可能不希望在名为“Core.toolbar.view.ToolbarView”的类中硬编码的数组末尾添加额外的项目。

【解决方案3】：

当您在扩展Ext.container.Container（或创建它的实例）时提供items 时，默认情况下，任何先前指定的items 实际上都会被覆盖。没有现成可用的逻辑来合并它们 - 仅仅是因为 Ext JS 不知道如何您希望它们合并：您是否希望后者 items 追随前者那些，或者之前，或者以某种方式在中间，或者你想要压倒一切。你需要明确告诉 Ext JS 你想要什么。

所以，这里还有另一种方法：

Ext.define('Core.toolbar.view.ToolbarView', {
    extend: 'Ext.toolbar.Toolbar',
    dock: 'top',
    buildItems: function() {
        return [
            {
                xtype: 'button',
                text: 'add'
            },
            {
                xtype: 'button',
                text: 'remove'
            }
        ];
    },
    initComponent: function() {
        this.items = this.buildItems();
        this.callParent();
    }
});
Ext.define('MyApp.view.ToolbarView', {
    extend: 'Core.toolbar.view.ToolbarView',
    buildItems: function() {
        return this.callParent().concat([
            {
                xtype: 'button',
                text: 'ADDING AN OTHER BUTTON'
            }
        ]);
    }
});
Ext.create('MyApp.view.ToolbarView');

示例：https://fiddle.sencha.com/#fiddle/t48

【讨论】：