Sencha触摸卡布局问题

Posted 2023-02-25

【中文标题】Sencha触摸卡布局问题

【英文标题】：Sencha touch card layout problem

【发布时间】：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 并没有运气：/

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

【问题讨论】：

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

【参考方案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 调用。