Sencha Touch 1.1 - 当前视图之外的项目的可滚动 vbox 布局答案

【问题标题】：Sencha Touch 1.1 - scrollable vbox layout for Items outside of current viewSencha Touch 1.1 - 当前视图之外的项目的可滚动 vbox 布局
【发布时间】：2012-03-19 05:35:53
【问题描述】：

我的 Ext.Panel 上有一个 vbox 布局，其中包含三个项目，Page1、Page2 和 Page3。

    var CountryDetailsAllPages = new Ext.Panel({
        scroll: 'vertical',
        fullscreen: true,
        layout: { type: 'vbox', align: 'stretch' },
        dockedItems: [Toolbar],
        items: [Page1,Page2,Page3]
    });

Page1、Page2 和 Page3 包含各种其他面板，因此每个页面都太大而无法在整个屏幕上显示（因此垂直滚动）。本质上，在加载时，Page1 应该是可见的，用户必须向下滚动才能继续阅读其他页面。

但是，当渲染时，Sencha Touch 会尝试显示所有页面，结果是它们都相互重叠！

我从外部 HTML 文件加载页面内容，内容来自数据库，根据用户的选择而有所不同。我不能依赖固定的高度。

我该如何解决这个问题？

【问题讨论】：

问题是其中一个页面 (Page1) 内的 hbox 给出了两列布局。 Sencha 将此 hbox 面板的高度设置为 0px，这意味着在其下方放置一个面板（切换回一列）与 hbox 的内容重叠。我不知道如何阻止这种情况？
现在我更好地理解了这个问题，我创建了一个针对实际问题的新问题：stackoverflow.com/questions/9798268/…

标签： sencha-touch

【解决方案1】：

尝试指定面板的高度，如

height: '600px', // depending upon your pages height

【讨论】：

这是个好主意。但是，我从外部 HTML 文件加载页面内容，内容来自数据库，并且根据用户的选择而有所不同。我不能依赖固定的高度。
我认为如果我删除 Sencha Touch 似乎添加到其
元素中的自动计算的“高度”属性，它将起作用。有没有办法做到这一点？

【解决方案2】：

添加弹性配置

 flex:3,
 fullscreen: true,
 layout: { type: 'vbox', align: 'stretch' },
 dockedItems: [Toolbar],

【讨论】：

感谢您的建议。不幸的是，这并不能解决 0px 高度问题。请参阅我刚刚添加到问题中的评论。

【解决方案3】：

这是我之前发布的确切问题。如果您有一个具有 vbox 布局的面板。里面有多个面板，后面是一个列表。无法轻松计算所有项目的高度，因此它可以很好地滚动。我发现的唯一方法是将顶部面板设置为非常高的高度，以便一切都适合。如果有一种动态的方法来设置高度以使所有项目都完美契合，那就太好了。 IE: 列表内容及其周围的所有项目都会出现。

【讨论】：

换句话说，如果顶级容器可以计算内部组件的所有高度并将其高度设置为该值，那就太好了。然后用户可以从容器的顶部开始滚动到最后一项。