I've copy this code and added some more stuff to it.
This basically overrides some functionality in Xtemplate and allows you to add
objects to it in the following way:
Code:
'{[ this.addCmp({type:"xTypeName", itemData: values, planId: values.id }) ]}'
Here is the override code:
Code:
(function () { var originalOverwrite = Ext.XTemplate.prototype.overwrite;
var originalApply = Ext.XTemplate.prototype.apply;
Ext.override(Ext.XTemplate, {
overwrite: function () {
//execute the base overwrite method
originalOverwrite.apply(this, arguments);
//then, render any components that addCmp might have added
while (this.templateComponents.length > 0) {
var el = this.templateComponents.shift();
if (Ext.get(el.renderTo) != null) {
var newel = new Ext.create(el);
}
}
//then, render any components that addCmp might have added
while (this.liveComponents.length > 0) {
var component = this.liveComponents.shift();
component.render(component.renderComponentTo);
}
},
//an array to store the initialconfigs of the components-to-be
templateComponents:[],
liveComponents:[],
templateIdCount:0,
//Pushes an initialConfig to the array so that
//a component can be later created and rendered.
//It also generates a div container for the component
//with a random id if no id was provided
addCmp: function (initConfig) {
var wrapperId = "ext-c-wrap-";
if (initConfig.id != void (0)) {
wrapperId += initConfig.id;
} else {
//wrapperId += Math.random().toString().replace(".", "");
wrapperId += (this.templateIdCount++).toString() + Math.random().toString().replace(".", "");
}
initConfig.renderTo = wrapperId;
this.templateComponents.push(initConfig);
//return '<div id="' + wrapperId + '"' + (initConfig.width == void(0) ? '' : ' style="width:'+ initConfig.width +'px"') + '></div>';
return '<div id="' + wrapperId + '"></div>';
},
addCmpInstance: function (component) {
var wrapperId = Ext.id(null,"ext-l-c-wrap-");
if (component.id != void (0)) {
wrapperId += component.id;
} else {
//wrapperId += Math.random().toString().replace(".", "");
wrapperId += (this.templateIdCount++).toString() + Math.random().toString().replace(".", "");
}
component.renderComponentTo = wrapperId;
this.liveComponents.push(component);
//return '<div id="' + wrapperId + '"' + (initConfig.width == void(0) ? '' : ' style="width:'+ initConfig.width +'px"') + '></div>';
return '<div id="' + wrapperId + '"></div>';
},
addCmpTo: function (container, initConfig, collection) {
if (collection == void(0)){
this.addCmpTo(container, initConfig, this.templateComponents);
} else {
if (collection.length > 0){
for (var i=0; i<collection.length; i++){
if (collection[i].id == container){
if (collection[i].items == void(0)){
collection[i].items = [];
}
collection[i].items.push(initConfig);
break;
}
if (collection[i].items != void(0)){
this.addCmpTo(container, initConfig, collection[i].items);
}
}
}
}
return;
}
});
})();
I understood that in Sencha 2 there is something called ComponentView that should allow this.