Easy extention on base of Ext.draw.Component

[Mycoding]

Please give me advice.
I am trying to develop extention on base of Ext.draw.Component.
When I run this extention to run just nothing appear although if I do it without extention it is shown.

Extention

Ext.define('Ext.draw.Component.Extention1', {
	extend: 'Ext.draw.Component',
	initComponent: function(){
		Ext.apply(this, {
			viewBox: false,
			items:[{
				type: 'circle',
				fill: '#79BB3F',
				radius: 100,
				x: 100,
				y: 100
			}]
		});
		this.callParent(arguments);
	}
});

How run

var drawComponentExtention = Ext.create('Ext.draw.Component.Extention1', {
    param1:1
});


Ext.create('Ext.Window', {
    width: 215,
    height: 235,
    layout: 'fit',
    items: [drawComponentExtention]
}).show();

[bcmillustrator]

I too am seeing this behavior. If I create an Ext.draw.Component object directly and add it as an item to my window, I see the component as expected.

If I try to extend the Ext.draw.Component class and then create the extended object and add it as an item to my window, I do not see the component.

Thanks,

Brian

[bcmillustrator]

After a good night sleep and a little more poking at the code. I found a solution that works for me.

Originally, I created the Ext.draw.Component directly. Adding the variable drawComponent as an item in my window created a circle as expected:

 var drawComponent = Ext.create('Ext.draw.Component', {
    viewBox: false,
    id: 'spaceShipId',
    items: [{
        type: 'circle',
        fill: '#ffc',
        radius: 100,
        x: 150,
        y: 150
    }]
});

I then tried to create an extended class from Ext.draw.Component, and I naively came up with the followingcode (along with other permutations) which "did not work" (the circle did not appear):

Ext.define(
    'GameApplication.ShipComponent',
    {
        extend: 'Ext.draw.Component',
        
        viewBox: false,
        items: [{
            type: 'circle',
            fill: '#ffc',
            radius: 100,
            x: 150,
            y: 150
        }]
    }
);

var drawComponent = Ext.create('GameApplication.ShipComponent', {
    id: 'spaceShipId'
});

I then created the following code that moved the config parameters into a class constructor. This code does show the expected circle:

Ext.define(
    'GameApplication.ShipComponent',
    {
        extend: 'Ext.draw.Component',
        viewBox: false,
        constructor: function (config) {
            this.items = [{
                type: 'circle',
                fill: '#ffc',
                radius: 100,
                x: 150,
                y: 150
            }];
            if (this.items) {
                Ext.apply(config, {
                    items: this.items
                });
            }
            this.callParent([config]);
        }
    });
var drawComponent = Ext.create('GameApplication.ShipComponent', {
    id: 'spaceShipId'
});

I am not yet familiar enough with the framework to tell you why the first bit of code did not work but the second did....I am hoping that my theoretical understanding of the framework will come as I continue to use it. If anyone does know why the first did not work, but the second did, I would appreciate hearing it.

Perhaps, Mycoding, if your problem is similar to mine, a similar coding approach is in order?

Thanks,

Brian

[Mycoding]

Did you find the better way?
By the way your code doens't work.

[matthewh]

I had to add width and height parameters so that bcmillustrator's example would display.

Ext.define('GameApplication.ShipComponent', {
  alias : 'widget.ship', // added to take advantage of {xtype : 'ship'}
  height : 200, // added 
  width : 200, // added
  extend: 'Ext.draw.Component',
  viewBox: false,
  constructor: function (config) {
    this.items = [{
      type: 'circle',
      fill: '#ffc',
      radius: 100,
      x: 150,
      y: 150
    }];

    if (this.items) {
      Ext.apply(config, {
        items: this.items
      });
    }
    this.callParent([config]);
  }
}); 

Though he didn't explicitly state -- the key is to pass your items in via the config object. Setting this.items = [ ... ] in the constructor or on the defined object will not do it.

...
constructor: function (config) {
  this.callParent([{items : [
    // insert your items here
  ] }]);
}
...