Sencha Touch 2：列表不顯示在標籤面板

背景：我正在開發一個使用senchatouch 2 MVC框架的應用程序。我正在使用帶有兩個選項卡的Tabpanel的屏幕上工作。Sencha Touch 2：列表不顯示在標籤面板

問題：在第一個選項卡中，我想顯示一個標題欄和一個列表。我能夠顯示titleBar，但不能顯示標籤內的列表。當我使用Google Chrome瀏覽器查看元素時，列表顯示爲空。我正在使用sencha網站的樣本列表代碼。我能夠在另一個面板中顯示列表，但是當我將它作爲一個項目放置在tabPanel中時，它不會顯示。

這是我使用的代碼：

Ext.define('POC.view.WUHomePage', { 
    extend: 'Ext.TabPanel', 
    requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'], 
    alias: 'widget.wuHomePageView', 

    config: { 
     fullscreen: true, 
     tabBarPosition: 'bottom', 
     cardSwitchAnimation: 'slide', 
     defaults: { 
      styleHtmlContent: true 
     }, 

     items: [{ 
      // This is first tab 
      title: 'Home', 
      iconCls: 'home', 
      items: [{ 
       xtype: 'titlebar', 
       title: 'Hello', 
       docked: 'top', 
       items: [{ 
        xtype: 'button', 
        text: 'LogOut', 
        ui: 'action', 
        itemId: 'newButton', 
        align: 'right' 
       }] 
      }, { 
       xtype: 'list', 
       title: 'Sample', 
       fullscreen: true, 
       itemTpl: '{title}', 
       data: [{ 
        title: 'Item 1' 
       }, { 
        title: 'Item 2' 
       }, { 
        title: 'Item 3' 
       }, { 
        title: 'Item 4' 
       }] 
      }] 
     }, 
     // This is second tab 
     { 
      title: 'Contact', 
      iconCls: 'user', 
      html: 'Contact Screen' 
     }] 
    }, 

});

來源

2012-12-13 Gendaful

不要設置列表，全屏。只有一個組件應該設置爲全屏，在你的情況下它是TabPanel。相反，請將列表設置爲高度100％，並將父級組件設置爲合適的佈局。

來源

2012-12-13 05:38:37 OhmzTech

非常感謝，Ohmz。我真的很感謝你的幫助:)。我沒有設置高度導致問題，並且全屏應該不適用於子組件。 – Gendaful

Sencha Touch 2：列表不顯示在標籤面板

回答

相關問題