Calling this.callParent inside of Ext.js store.each - extjs

Question

I have a Sencha class that extends Ext.draw.Component and it accepts a store of MyModel. I am trying two different methods and I am getting differing, non-satisfactory results.
The First Method
Inside the constructor of the class I read in the store and do the following:
//Inside constructor of the class
this.store = config.store; //config is passed in from the constructor
var me = this;
me.store.each(function (model) {
me.renderTo = model.get('elementToRenderTo');
me.items = [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: model.get('color'),
stroke: 'none'
}];
if (me.items) {
Ext.apply(config, { //config is passed in from the constructor
items: me.items
});
}
me.callParent([config]);
}
When I put the last of the code where it is (inside of the store.each), I get an exception:
Uncaught TypeError: Cannot call method 'apply' of undefined
The Second Method
However, if I move the Ext.apply and callParent outside of the store.each, I don't get an expection, but only the last model gets drawn (likely because the me.items is being overwritten on each iteration of the model).
//Inside constructor of the class
this.store = config.store; //config is passed in from the constructor
var me = this;
me.store.each(function (model) {
me.renderTo = model.get('elementToRenderTo');
me.items = [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'black',
stroke: 'none'
}];
}
if (me.items) {
Ext.apply(config, { //config is passed in from the constructor
items: me.items
});
}
me.callParent([config]);
Is there another way to create a custom Ext.draw.Component that uses a store? What am I missing? The second method doesn't seem right, but I can't get rid of the exception on the first.

Answer 1

There are a few possible issues with this code:
1
this.store = config.store;
Is this the store instance or a string config? The proper way to deal with store configs in a constructor is like so:
this.store = Ext.data.StoreManager.lookup(this.store || 'ext-empty-store');
2
Although you are using me for scope, you probably want to ensure that the scope of each is indeed that of what's outside it so:
me.store.each(function (model) { ... }, this);
3
Regardless of where you do this, you won't be pushing all of the items:
Ext.apply(config, {
items: me.items
});
Because what you do here is you keep override item with me.items.
You shouldn't apply anything to items - it's an array managed by the component itself. You should really add items to it instead:
items.push( me.items )
4
Are you assuming local store only? Because if your store is to be loaded asynchronously - you'd get nothing unless you load the items upon load.
5
What are you actually trying to do here? Have the items loaded from a store? If such is the case you shouldn't do it in the constructor.
You should really look at one of the Ext source files to see how this is to be done. Here's a simplified version of how Ext.panel.Table does it:
Ext.define('Ext.panel.Table', {
extend: 'Ext.panel.Panel',
initComponent: function() {
var me = this,
store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
me.mon(store, {
load: me.onStoreLoad,
scope: me
});
},
onStoreLoad: function() {
}
});