Sencha Touch TPL and ITEM

Question

Guys let me explain my issues, i have a List view that load some elements from a store file, when i click a List item, i have a controller who push the data in a new Details view

'placesContainer places list':{
             itemtap: function(list,index,target,record) {
                 console.log("item "+record.get('name')+" pigiato");
                 var detailsView = Ext.create('MyApp.view.Details');
                 this.getPlacesContainer().push(detailsView);
                 detailsView.setData(record.data);

             }
         }

Ok here. Now what i want is to LOAD the same information from the store file in my new Details view. Here is my detail view:

Ext.define('MyApp.view.Details',{
extend:'Ext.Panel',
xtype:'details',
config:{
    layout:'vbox',
    scrollable:true,
    styleHtmlContent:true,
    styleHtmlCls:'details',
    tpl:'<h1>{name}</h1>' +
        '<p><span>Lunghezza:</span> {lunghezza} <span>Difficoltà:</span> {difficulty}</p>' +
        '<h2>{prova}</h2>',
    items: [
        {
            xtype: 'panel',
            flex:1,
            store:'Places',
        },
        {
            xtype: 'carousel',
            flex:2,
            items: [
                {style: "background-color: #7BB300"},
                {style: "background-color: #555555"},
                {style: "background-color: #00ff2a"},
                {style: "background-color: #00bb1f"},
                {style: "background-color: #008616"},
                {style: "background-color: #00490c"}
            ]
        }
    ]
}

If i write the tpl element OUTSIDE the item, i can read the data in my details view. When i try to put the tpl element INSIDE the items, all the data disappear.. What's wrong??? I tried this way but with no results...

items: [
        {
            xtype: 'panel',
            flex:1,
            store:'Places',
            tpl:'<h1>{name}</h1>' +
                '<p><span>Lunghezza:</span> {lunghezza} <span>Difficoltà:</span> {difficulty}</p>' +
                '<h2>{prova}</h2>',
        },
items: [
        {
            xtype: 'panel',
            flex:1,
            store:'Places',
            itemTpl:'<h1>{name}</h1>' +
                '<p><span>Lunghezza:</span> {lunghezza} <span>Difficoltà:</span> {difficulty}</p>' +
                '<h2>{prova}</h2>',

        },

An help would be great!

Answer 1

You need to make liitle change in you itemtap function

    'placesContainer places list':{
         itemtap: function(list,index,target,record) {
             console.log("item "+record.get('name')+" pigiato");
             var detailsView = Ext.create('MyApp.view.Details');
             this.getPlacesContainer().push(detailsView);
             detailsView.setData(record.data); // will set data to detailsview 

             detailsView.getAt(0).setData(record.data); // will set data to first component in items array

             detailsView.getAt(1).setData(record.data); // will set data to second component in items array

              .... and so ....

         }
     }