Sencha触摸卡布局问题答案

【问题标题】：Sencha touch card layout problemSencha触摸卡布局问题
【发布时间】：2011-04-20 08:19:42
【问题描述】：

我正在尝试使用 sencha touch 为 iphone 建立一个网站。我是煎茶和分机的新手。

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

页眉和页脚应该是可滚动的（不是停靠！），我希望页面之间有动画。

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

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

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

//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 的高度和宽度设置为某个值时，我只能看到主页。我也尝试过设置：自动高度：真对于主面板，cardPanel 和 cardWrapper 并没有运气：/

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

【问题讨论】：

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

标签： sencha-touch extjs

【解决方案1】：

首先，停靠时可以有一个内部可滚动的页眉和页脚。我之前做过一个工具栏，它停靠在主视图上，但仍然可以水平滚动。您所要做的就是设置工具栏的滚动属性。

其次，将 cardPanel 的 'flex' 属性设置为 1，并为页眉和页脚提供固定高度（或弹性）可能会解决您看到的问题。

所以：

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 变成 Carousel。您可以使用属性“indicator”关闭对象上的指示器。要在卡片之间切换，您将使用相同的 setActiveItem 调用。

【讨论】：