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调用。