Невозможно добавить спрайты в конструктор Ext.draw.Container.

Question

Я пытаюсь создать класс аватара, который может иметь разные размеры при использовании в разных частях приложения. Основной аватар следующий:

Ext.define('Avatar', {
    extend: 'Ext.draw.Container',
    width: 60,
    height: 60,
    sprites: [{
        type: 'circle',
        fillStyle: '#79BB3F',
        r: 30,
        x: 30,
        y: 30
    }, {
        type: 'text',
        x: 30,
        y: 30,
        text: 'AU',
        textAlign: 'center',
        textBaseline: 'middle',
        fontSize: 30
    }]
});

https://fiddle.sencha.com/#view/editor&fiddle/2ks4

Чтобы иметь возможность создавать аватары переменного размера, я переопределяю конструктор и добавляю туда спрайты, где я могу затем заменить фиксированные размеры переменными:

Ext.define('Avatar', {
    extend: 'Ext.draw.Container',
    width: 60,
    height: 60,
    constructor: function() {
        var me = this;
        Ext.apply(me, {
            width: 30, // Changing component size works, ...
            height: 30,
            sprites: [{ // but sprites do not work!
                type: 'circle',
                fillStyle: '#79BB3F',
                r: 30,
                x: 30,
                y: 30
            }, {
                type: 'text',
                x: 30,
                y: 30,
                text: 'AU',
                textAlign: 'center',
                textBaseline: 'middle',
                fontSize: 30
            }]
        });
        me.callParent(arguments);
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/2kv1

Возможно изменение размера аватара через конструктор; добавление спрайтов не работает. Как мне заставить его работать?

Answer 1

Вместо этого переопределите initComponent:

initComponent: function() {

    var sprites =[{
        type: 'circle',
        fillStyle: '#79BB3F',
        r: 30,
        x: 30,
        y: 30
    }, {
        type: 'text',
        x: 30,
        y: 30,
        text: 'AU',
        textAlign: 'center',
        textBaseline: 'middle',
        fontSize: 30
    }];

   this.setSprites(sprites);

}