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

当你提供items扩展Ext.container.Container（或创建它的实例）时，默认情况下，任何先前指定的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将项添加到扩展类

3 个答案: