Sencha觸摸板佈局問題

Question

我正在嘗試爲使用sencha touch的iphone構建網站。我是sencha和ext的新手。

我想要一個頁眉，頁腳和內部內容的佈局。它可以理解爲具有頁眉&頁腳的主頁面，頁腳將在每個頁面上使用。

頁眉和頁腳應滾動（不停靠！），我想在頁面之間有一個動畫。

通常，網站將有一個標題，菜單和頁腳的家。如果用戶點擊菜單中的某個按鈕（即「關於」），該頁面應該滑動到「關於」頁面的右側。此頁面將有一個標題，一些內容，後退按鈕和頁腳。頁眉&頁腳將與主頁上的頁面相同。

我已經看到很多解決方案與停靠的頁眉和頁腳，但我還沒有找到任何以我想要的方式工作（問題是我希望頁眉和頁腳可滾動）。

我嘗試過使用嵌套在vbox面板中的卡片佈局面板，我也試過卡片佈局面板嵌套在嵌套在vbox面板中的適合佈局面板中（請在下面的示例代碼中找到）。

//home, video and contact panels are quite similar to about panel 
about = new Ext.Panel({ 
       layout: { 
        type: 'vbox', 
        pack: 'start' 
       }, 
       items: [ 
        { 
         html: ['<div class="pageWrapper"><h1><span>About</span></h1></div>'] 
        } 
       ] // end items 
      }); 

    cardPanel = new Ext.Panel({ 
      layout: 'card', 
       items: [home, about, video, contact] 
      }); 

    cardWrapper = new Ext.Panel({ 
       layout: 'fit', 
       items: [cardPanel] 
      }); 

    var mainPanel = new Ext.Panel({ 
       layout: 'vbox', 
       scroll: 'vertical', 
       fullscreen: true, 
       items: [header, cardWrapper, btnBack, footer] 
      }); 

當我使用上面的代碼時，cardWrapper的height = 0和width = 0。當我將cardWrapper的高度&設置爲某個值時，我只能看到主頁。我也曾嘗試設置： autoHeight：真 對於主面板，CardPanel都和cardWrapper並沒有運氣：/

你有任何其他想法我怎麼能實現網站的這一佈局？

Answer 1

首先，停靠時可以有內部可滾動的頁眉和頁腳。我在停靠到主視圖的工具欄之前完成了它，但仍然可以水平滾動。您所要做的就是設置工具欄的滾動屬性。其次，將cardPanel的'flex'屬性設置爲1，並給出一個固定的高度（或flex）以標題&頁腳可以解決您所看到的問題。

所以：

var cardPanel = new Ext.Panel({ 
    flex: 1, 
    layout: 'card', 
    items: [home, about, video, contact] 
}); 

var header = new Ext.Panel({ 
    height: 100, 
    html: "<h1>Header</h1>" 
}); 

var footer = new Ext.Panel({ 
    height: 100, 
    html: "<h1>Footer</h1>" 
}); 

var mainPanel = new Ext.Panel({ 
      layout: 'vbox', 
      scroll: 'vertical', 
      fullscreen: true, 
      items: [header, cardPanel, btnBack, footer] 
}); 

最後，你可以嘗試是開啓CardPanel都變成一個旋轉木馬。您可以使用屬性「指示器」關閉對象上的指示器。要在卡之間切換，您可以使用相同的setActiveItem調用。