将子项连接到父项

Question

我在Sencha的网站上找不到任何处理以下情况的文档：

立方体（基类）

Ext.define('example.ext.Cube', {
    sides: [
        'one',
        'two',
        'three',
        'four',
        'five',
        'six']
});

以下两个版本中的哪一个是将新属性与现有属性连接的标准方法？两者都以相同的方式工作，但我觉得版本A更有意义

十二面体（儿童班）

版本A

Ext.define('example.ext.Dodecahedron', {
    extend: 'example.ext.Cube',
    sides: [
        'seven',
        'eight',
        'nine',
        'ten',
        'eleven',
        'twelve'],

    constructor: function () {
        var me = this;
        // Alternatively: Ext.apply(me.sides, me.superclass.sides);
        me.sides = me.superclass.sides.concat(me.sides);
        me.callParent(arguments);
    }
});

版本B

Ext.define('example.ext.Dodecahedron', {
    extend: 'example.ext.Cube',
    constructor: function () {
        var me = this;
        Ext.apply(me.sides, [
            'seven',
            'eight',
            'nine',
            'ten',
            'eleven',
            'twelve']);
        me.callParent(arguments);
    }
});

工作示例

Ext.onReady(function() {
  Ext.ns('example.ext');

  Ext.define('example.ext.Cube', {
    sides: [
      'one',
      'two',
      'three',
      'four',
      'five',
      'six'
    ],

    roll: function() {
      return this.sides[Math.floor(Math.random() * this.sides.length)];
    }
  });

  Ext.define('example.ext.Dodecahedron', {
    extend: 'example.ext.Cube',
    sides: [
      'seven',
      'eight',
      'nine',
      'ten',
      'eleven',
      'twelve'
    ],

    constructor: function() {
      var me = this;
      me.sides = me.superclass.sides.concat(me.sides);
      me.callParent(arguments);
    }
  });

  var die12 = Ext.create('example.ext.Dodecahedron');

  window.roll = function() {
    var side = die12.roll();
    var indefiniteArticle = side.match(/^[aeiou](?![n])/) ? 'an' : 'a';
    document.getElementById('result').innerHTML = Ext.String.format('You rolled {0} {1}.', indefiniteArticle, side);
  }
});

.vertical {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}
#dice {
  background: url('https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/Dice.png') 0 0 no-repeat;
  height: 48px;
  width: 48px;
  padding: 0;
  border: none;
  outline: none;
}
#result {
  margin-left: 0.5em;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/builds/ext-core.js"></script>
<input type="button" id="dice" value="" onclick="roll();" />
<div style="display:inline-block;">
  <div style="position:relative;height:64px;width:256px;">
    <div class="vertical">
      <span id="result"></span>
    </div>
  </div>
</div>

Answer 1

Ext JS 5配置系统允许原型链接的继承配置。在4.x中你必须自己动手。

我建议选择类似你的版本A，从长远来看，它会减轻痛苦。