I've done something like this. I don't have any simple example, but will describe how it worked:
I have an empty component (Panel), and dynamically add children in a loop. In my case children are form-panel's, so I can load data from some Store or from Ajax call.
Something like this:
Code:
//parent class:
App.views.XParent = Ext.extend(Ext.Panel, {
id: 'xParent',
layout: 'auto',
scroll: 'vertical',
items: [
],
});
Ext.reg('xParent', App.views.XParent);
//children class:
App.views.XChild = Ext.extend(Ext.form.FormPanel, {
items:[{
xtype: 'fieldset',
items: [
//define fields here
]
}]
});
Ext.reg('xChild', App.views.xChildren);
//Function creating children.
createChildren: function(data){
var parent = Ext.getCmp('xParent');
parent.removeAll();
for(var i=0; i<data.length; ++i){
//create component
var newCmp = Ext.create({
xtype: 'xChild',
id: ('xChild_'+i) //optional
});
//load data to form fields
newCmp.load(data[i]);
newCmp.items.getComponent(0).setTitle('Item nr. '+(i+1));
parent.add(cmp);
}
parent.doLayout();
}