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

我的Ext.面板上有一个vbox布局，包含三个项目：第1页、第2页和第3页

    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文件加载页面内容，内容来自数据库，根据用户的选择不同。我不能靠固定的高度

---

如何解决此问题？

尝试指定面板的高度，如

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

添加一个flex配置

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

---

这正是我之前发布的问题。如果您有一个具有vbox布局的面板。里面有多个面板，后面是一个列表。没有办法轻松计算所有项目的高度，因此它可以很好地滚动。我找到的唯一方法是将顶部面板设置为一个非常大的高度，这样所有的东西都能放进去。如果有一种动态的方式来设置高度，使所有物品都能完美贴合，那就太好了。IE：列表内容以及周围的所有项目都会出现。

这是个好主意。但是，我从外部HTML文件加载页面内容，内容来自数据库，并且根据用户的选择而有所不同。我不能依赖一个固定的高度。我想如果我删除senchatouch添加到元素中的自动计算的“高度”属性，它会起作用。有没有办法做到这一点？问题是其中一个页面（第1页）中有一个hbox，以提供两列布局。Sencha将这个hbox面板设置为0px的高度，这意味着在它下面放置一个面板（切换回一列）与hbox的内容重叠。我不知道如何阻止这一切？既然我对这个问题有了更好的理解，我就针对实际问题提出了一个新问题：谢谢你的建议。不幸的是，这并不能解决0px的高度问题。请看我刚才添加到问题中的注释。换句话说，如果顶级容器可以计算内部组件的所有高度，并将其高度设置为该值，那就太好了。然后用户可以从顶部滚动到容器上的最后一项。