Mixing tpl and items

[cyberwombat]

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

[rdougan]

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?

[cyberwombat]

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?

[rdougan]

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

[cyberwombat]

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

 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}',
         }

[rdougan]

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'});