Mixing tpl and items

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?

Code:

---

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
             
        },
        ]
    }
});

---

Why not create another component which is just for the 'tpl', and then include that component as an item, wherever you need it, in App.view.ListDetail?

I tried - if you look at my code the first item has the tpl in there - but it doesn't render - I can only get the tpl to render if there is no items array present - perhaps I need to specify a different component type or something?

For the the configuration to do anything, you will also need to pass a data config: data

I don't know how to access the parent data.

Code:

---

config: {
        layout: 'vbox',
        scrollable: true,
      /* this works fine
        tpl: {name},
        */
      items: [
            {
                xtype: 'component',
                data: <- WHAT GOES HERE? taking it off makes for a blank page, this.data makes nothing
                tpl: '{name}',
        }

---

You would need to implement a function in the parent view which, when called, would get the child view where you want to update the t/l, and call the setters for the data config.

this.down('component').setData({name: 'Hello'});

I've tried that - your example works because it is static data but I need to access the actual data param that was passed on view load. I tried doing it on the events show and painted but they occur too late and I don't see a 'load' type of event. Does that make sense?

Add an updateData method to your parent view, and then use that to update the child view.

Code:

---

updateData: function(newData, oldData) {
  this.down('component').setData(newData);
}

---

That method will get called anytime the data config is changed in your view.

You rock my world!

Bare in mind that all configurations have that method called when they change. So if you have a config called 'test', updateTest will be called when it changes. Very powerful.