Extjs 将项目添加到扩展 class

Question

我正在使用 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 属性我正在用新项目覆盖旧项目，但我不想这样做。我想添加第三个按钮。

可能吗？

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

Answer 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

Answer 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

Extjs 将项目添加到扩展 class

Extjs add item to extended class

javascript

extjs

extjs5