如何使XTemplate在Sencha Touch中與TabPanel一起使用

Question

但是，如果我嘗試將XTemplate插入其中一個面板，然後調用content.update(myArray);，我的TabPanels會按預期生成，結果是面板不會顯示不動，按鈕不起作用，模板不呈現。

誰能告訴我我做錯了什麼？

<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> 

Answer 1

我計算出來

我需要videoPanel.update(videosToShow);

我也不得不改變
videoPanel = {
到
videoPanel = new Panel({