Populate custom component with store - sencha-touch

Question

Im trying to populate a custom component using a store (actually a store with local data) in a Sencha Touch 2 project.
My idea is to create one custom component for each element in the store, but actually nothing happens.
I have tried several things but anything works, could you help me? I have done an example to show the problem:
model:
Ext.define('project.model.city', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'country', type: 'string'},
{name: 'city', type: 'string'}
]
}
});
store:
Ext.define('project.store.cities', {
extend: 'Ext.data.Store',
requires: ['project.model.city'],
model: 'project.model.city',
autoLoad: true,
data: [
{ country: 'Germany', city: 'Berlin' },
{ country: 'Italy', city: 'Rome' }
]
});
View with store:
Ext.define('project.view.cityAll', {
extend: 'Ext.Panel',
xtype: 'cityAllView',
config: {
items:[{
xtype: 'cityItemView',
store: 'project.store.cities',
}]
}
});
Custom component View:
Ext.define('project.view.cityItem', {
extend: 'Ext.Panel',
xtype: 'cityItemView',
config: {
items: [{
itemTpl: '{city}'
}]
}
});

Answer 1

You need to assign store to cityItemView instead of cityAllView. cityItemView is having template specified and needs to be loaded with data.
Ext.define('project.view.cityItem', {
extend: 'Ext.Panel',
xtype: 'cityItemView',
config: {
items: [{
xtype:'list',
itemTpl: '{city}'
store:'project.store.cities'
}]
}
});
If you want to set data into panel, then you'd need to call setData(). A panel can not load data from store directly. You can use list view instead so show city, country pair. cityView no longer needed store property that way.
Give this a try.

Answer 2

You can add load listener in store which would loop through records and create as many panels:
listeners : {
load: function( me, records, successful, operation, eOpts ){
var plist = [];
var cv = Ext.Create('project.view.cityAll');
if(successful){
var data = records[i].getData();
for(var i=0; i<records.length; i++){
plist.push({
xtype : 'cityItemView',
data : data
});
}
cv.add(plist);
}
// Now add cv to viewport or wherever you want
}
}
You have to change cityItemView to use data whichever way you want. If you are using initialize method you can access it like this.config.data