Sencha touch Sencha触摸卡布局问题

我正在尝试使用SenchaTouch为iphone建立一个网站。我是sencha和ext的新手

我想有一个页眉，页脚和内部内容的布局。它可以理解为带有页眉和页脚的母版页，将在每页上使用

页眉和页脚应该是可滚动的（不是停靠的！），我想在页面之间有一个动画

一般来说，该网站将有一个标题，菜单和页脚主页。如果用户单击菜单中的某个按钮（即“关于”），页面应向右滑动到“关于”页面。此页面将有一个页眉、一些内容、后退按钮和页脚。页眉和页脚的外观与主页上的相同

我已经看到了许多使用停靠页眉和页脚的解决方案，但我没有找到任何一种能够以我想要的方式工作的解决方案（问题是我希望页眉和页脚是可滚动的）

我尝试过使用vbox面板中嵌套的卡布局面板，也尝试过使用vbox面板中嵌套的fit布局面板中嵌套的卡布局面板（请在下面的示例代码中查找）

//主页、视频和联系人面板与“关于”面板非常相似
关于=新的外部面板({
布局：{
键入：“vbox”，
包装：“开始”
},
项目：[
{
html:['About']
}
]//最终项目
});
cardPanel=新的外部面板({
布局：“卡片”，
项目：[主页、关于、视频、联系人]
});
cardWrapper=新的外部面板({
布局：“适合”，
项目：[卡片面板]
});
var主面板=新的外部面板({
布局：“vbox”，
滚动：‘垂直’，
全屏：对，
项目：[页眉、卡片包装器、btnBack、页脚]
});

当我使用上述代码时，cardWrapper的高度为0，宽度为0。只有将cardWrapper的高度和宽度设置为某个值时，我才能看到主页。我还尝试设置： 自动高度：真 对于主面板、cardPanel和cardWrapper，没有运气：/

---

您还有其他想法吗？如何实现网站的这种布局？

首先，您可以在停靠时拥有一个内部可滚动的页眉和页脚。我以前做过这样的工作，工具栏停靠在主视图上，但仍然可以水平滚动。您只需设置工具栏的滚动属性

其次，将cardPanel的“flex”属性设置为1，并为页眉和页脚提供固定高度（或者也提供一个flex），可以解决您看到的问题

因此：

var cardPanel=新的外部面板({
弹性：1，
布局：“卡片”，
项目：[主页、关于、视频、联系人]
});
var标题=新的外部面板({
身高：100，
html：“标题”
});
var footer=新的外部面板({
身高：100，
html：“页脚”
});
var主面板=新的外部面板({
布局：“vbox”，
滚动：‘垂直’，
全屏：对，
项目：[页眉、卡片面板、btnBack、页脚]
});

---

最后，您可以尝试将cardPanel变成旋转木马。可以关闭属性为“indicator”的对象上的指示器。要在卡片之间切换，您将使用相同的setActiveItem调用。

您的标题不太具有描述性；它应该以问题的形式提出。编辑它可能会产生更多的观点和可能的答案。

//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]
            });

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]
});