Question

我是Sencha Touch的新手并且遇到了tpl vars的问题。我在listview控制器中有以下代码来推送下一个视图：

onProjectListItemTap: function(list, index, target, record) {
    console.log('onProjectListItemTap');
    // load the detail
    var navigationView = list.up('navigationview');
    navigationView.push({
        title: record.data.projectName,
        xtype: 'projectdetail',
        record: record
    });
}

这是＆＃39; projectdetail＆＃39;中的代码。视图：

Ext.define('Antea.view.project.projectDetail', {
extend: 'Ext.Panel',

xtype: 'projectdetail',

config: {
    layout: 'vbox',
    items:[{
        xtype: 'panel',
        flex:1,
        store: 'projects',
        tpl:+
            '<div id="projectHeader" style="background-image: url({projectHeader})"></div>'+
            '<div class="projectItemHolder">'+
                '<h2 class="pageHeaderH2">{projectname}</h2>'+
            '</div>',
    }]
}

在这种情况下，tpl vars不起作用。当我把tpl放在外面的项目并直接在配置中它确实有效。我使用的是sencha touch 2.3.2。我还发现了这篇帖子：Sencha Touch TPL and ITEM这与我的问题非常相似，试过但不知怎的，它不适合我（也许是因为我是一个完全的初学者）。希望有人能帮到我这里！

Answer 1

我认为问题在于，您正在混合tpl和项目，这似乎无法发挥作用。如果您将tpl移出配置对象以保持其清洁，那将是最好的。我也是按照方式添加模板，他们在docs：

中建议

Ext.define('Antea.view.project.projectDetail', {
  extend: 'Ext.Container', // use container instead of panels its one wrapper less

  xtype: 'projectdetail',

  config: {},

  // method will be called by the sencha framework
  initialize: function() {
      this.callParent();
      this.addTemplate();
      this.setData(this.getRecord().getData());
  },

  addTemplate: function() {

        t = new Ext.Template(
            '<div id="projectHeader" style="background-image: url({projectHeader})"></div>'+
            '<div class="projectItemHolder">'+
                '<h2 class="pageHeaderH2">{projectname}</h2>'+
            '</div>',

            {
                compiled: true, // compile immediately
                disableFormats: true // faster
            }
        );

    t.compile();
    this.setTpl(t);            
  }
});

希望有所帮助！

Sencha Touch 2.3.2：在推送视图中使用记录数据

1 个答案: