Sencha touch:如何将JSON结果加载到HTML面板中

Question

我一直在尝试所有我能想到的组合，我也从搜索中找到了什么，但是我想做的就是从服务器加载一个JSON对象，然后使用该对象渲染带有视频，信息等的面板

，但是我无法工作，我在这里做错了什么？

    {
        xtype: 'panel',
            navigationBar: {hidden: true},
        title: 'Video feed',
            html: '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>',
        store: {
        autoLoad: true,
            fields: ['video'],
            proxy: { type: 'jsonp', url: 'http://patrick.includu.com/app/appvideos/getVideoPage/234', reader: { type: 'json' } }
        }
    }

Answer 1

首先，请注意，您从代理人返回的JSON无效。您可以在这里进行验证。

要从JSON呈现视图，请查看Sencha的数据范围。在这里，您使用itemTpl渲染视频，信息等。因此，在您的情况下，类似的东西：

itemTpl: '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>'

我希望这对您有所帮助！

Answer 2

如果您的商店将拥有一个以上的视频记录，并且您想显示所有视频，请尝试删除html:并添加：

tpl: '<tpl for=".">' + 
       '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>' +
     '</tpl>'

如果您一次只显示一个视频，只是要做：（虽然仍删除html:）

tpl: '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>'

另一个陷阱：如果指定了html标签，即使html: ''也将始终覆盖指定的TPL。