Sencha Touch TPL和ITEM

时间:2013-03-22 11:40:28

标签: javascript sencha-touch sencha-touch-2

伙计们让我解释一下我的问题,我有一个List视图,从商店文件中加载一些元素,当我点击List项目时,我有一个控制器在新的Details视图中推送数据

'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元素写在OUTSIDE项目之外,我可以在详细信息视图中读取数据。当我尝试将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>',

        },

帮助会很棒!

1 个答案:

答案 0 :(得分:3)

您需要对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 ....

         }
     }