Question

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

我想要一个包含页眉，页脚和内容的布局。它可以被理解为带有标题和＆amp ;;的主页。将在每页上使用的页脚。

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

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

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

我曾尝试使用嵌套在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的高度= 0，宽度= 0。当我设置身高和时，我只能看到主页。 cardWrapper的宽度为某个值。我也试过设置： autoHeight：是的对于主页面板，cardPanel和cardWrapper并没有运气：/

您是否有任何其他想法如何实现此网站布局？

Answer 1

首先，停靠时可以使用内部可滚动的页眉和页脚。我已经在停靠到主视图的工具栏之前完成了它，但仍然可以水平滚动。您所要做的就是设置工具栏的滚动属性。

其次，将cardPanel的'flex'属性设置为1，并为header＆amp;提供固定高度（或者也是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变成Carousel。您可以使用属性“指标”关闭对象上的指标。要在卡片之间切换，您将使用相同的setActiveItem调用。

Sencha触摸卡布局问题

1 个答案: