Sencha Touch TPL和Item

2022-04-04 00:00:00 javascript sencha-touch sencha-touch-2

让我解释一下我的问题,我有一个从存储文件加载一些元素的列表视图,当我单击一个列表项时,我有一个控制器在新的详细信息视图中推送数据

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

             }
         }

好的在这里。现在,我想要的是从我的新详细信息视图中的存储文件加载相同的信息。 以下是我的详细信息视图:

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"}
            ]
        }
    ]
}

如果我在项之外编写TPL元素,我可以在详细信息视图中读取数据。当我尝试将TPL元素放入项中时,所有数据都消失了。怎么了? 我尝试了这种方法,但没有结果...

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

        },

能帮上忙就太好了!


解决方案

您需要对您的itemtap函数进行小规模更改

    '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 ....

         }
     }

相关文章