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无效。您可以对其进行验证here。

要从JSON渲染视图，请查看Sencha's Dataview。在这里，您使用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。

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

2 个答案: