Mixing tpl and items in Sencha Touch 2 - sencha-touch

Question

I have a list detail view which works fine - it has a tpl and no items. I would like to add other components so I added an items array but now the tpl no longer shows. I have tried keeping the tpl in the main config and also adding it as a component to no avail (how does the data know where the appropriate tpl is located btw?) - I guess ideally I would like to be able to inject my list data anywhere on the page - i..e above and below and in between items. How is this done?
Ext.define("App.view.ListDetail", {
extend: "Ext.Container",
record: undefined,
config: {
layout: 'vbox',
style: "padding: 5px;",
scrollable: true,
// tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join(""), // this works fine if I have no items array
//adding this causes above tpl to no longer render
items: [
{
xtype: 'component',
tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join(""), //this does nothing
},
{
xtype: 'panel',
//more stuff here
},
]
}
});

Answer 1

Unfortunately you cannot mix tpl and items configurations together, as they both update the html of the component.
To achieve what you want, you will need to add another item into the items configuration, ensuring you position it where you want it, and then add your custom tpl config into that item.
Also, I'm sure you are aware, but you need to use the data configuration alongside tpl, or it will not show anything.
Ext.define("App.view.ListDetail", {
extend: "Ext.Container",
record: undefined,
config: {
layout: 'vbox',
style: "padding: 5px;",
scrollable: true,
//adding this causes above tpl to no longer render
items: [
{
xtype: 'component',
tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join("") //this does nothing
},
{
xtype: 'panel'
//more stuff here
},
{
tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join("") // this works fine if I have no items array
}
]
}
});