extjs - Sencha Touch 2 Panel w/ Template 包括数据和对象

Question

我想知道是否可以在 Sencha Touch 2 的模板中同时包含数据并创建一个新对象？

我有以下代码：

Ext.define('MyApp.view.VideosDetail', {
extend: 'Ext.Panel',
xtype: 'videosdetail',

config: {
    title: 'Details',
    styleHtmlContent: true,
    scrollable: 'vertical',
    tpl: [
        '{content}',
        {
            xtype: 'video',
            width: 400,
            height: 400,
            url: '{link}'
        }
    ]
}
});

我看到[object Object]的不是带有链接 url 的视频对象。

通过{content}商店等可以正常工作。

Answer 1

Ok, two things you have to remember

1. You cannot use a complicated object inside of the tpl in the manner you just did. In Sencha Touch, adding a "," followed by a "{ . . . }" after the tpl strings implies adding member functions or configurations to your XTemplate. In this case, ST misunderstood your object to be a member function of sorts, and didn't display anything since you didnt call any function.

Example of member functions ::

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
    '<tpl if="this.isGirl(name)">',
        '<p>Girl: {name} - {age}</p>',
    '<tpl else>',
        '<p>Boy: {name} - {age}</p>',
    '</tpl>',
    '<tpl if="this.isBaby(age)">',
        '<p>{name} is a baby!</p>',
    '</tpl>',
'</tpl></p>',
{
    // XTemplate configuration:
    disableFormats: true,
    // member functions:
    isGirl: function(name){
       return name == 'Sara Grace';
    },
    isBaby: function(age){
       return age < 1;
    }
}
);

2. If you have a complex tpl object, always try to create a separate XTemplate object instead, that will make your code simple and beautiful (ie easy to read)

3. I have done something similar and added videos to my XTemplate before. But I haven't used the video object. Instead, my tpl that I created looks as follows ::

   

In my scenario, the url of my video was composed of two parts, vurl1 was something common like "www.youtube.com/watch?" and the vcode1 was the dynamic code that followed.