Как заставить XTemplate работать с TabPanel в Sencha Touch

У меня есть TabPanels, генерируемые, как и ожидалось, однако, если я попытаюсь ввести XTemplate в одну из панелей, а затем вызову content.update(myArray);, результатом будет то, что панели не двигаются, кнопки не работают, и шаблон не отображается.

Может ли кто-нибудь сказать мне, что я делаю неправильно?

<script type="text/javascript">
    Ext.setup({
        onReady: function () {
            var rootPanel,
                videoPanel,
                aboutPanel,
                videoTpl,
                bergman,
                gray,
                videosToShow

            bergman = { id: "23657322" };
            gray = { id: "23694183" };
            videosToShow = [bergman, gray];

            videoTpl = new Ext.XTemplate(
                '<tpl for=".">',
                '<iframe src="http://player.vimeo.com/video/{id}?title=0&amp;byline=0&amp;portrait=0&amp;color=80ceff" ',
                'width="400" ',
                'height="225" ',
                'frameborder="0">',
                '</iframe>',
                '</tpl>'
            );

            videoPanel = {
                title: "Videos",
                tpl: videoTpl,
                iconCls: "tv",
                badgeText: "1",
                dockedItems: [{ xtype: "toolbar", title: "Videos"}],
                scroll: "vertical"
            };

            aboutPanel = {
                title: "About",
                html: "About RockPointe Church.",
                iconCls: "more",
                dockedItems: [{ xtype: "toolbar", title: "About"}],
                scroll: "vertical"
            };

            rootPanel = new Ext.TabPanel({
                fullscreen: true,
                layout: 'card',
                items: [videoPanel, aboutPanel],
                tabBar: { dock: 'bottom' }
            });

            content.update(videosToShow);
        }
    });
</script>