Sencha Touch 2 - 可滚动数据视图与面板中的其他项目重叠答案

【问题标题】：Sencha Touch 2 - Scrollable Dataview overlaps other items in PanelSencha Touch 2 - 可滚动数据视图与面板中的其他项目重叠
【发布时间】：2014-07-30 14:20:31
【问题描述】：

我想添加一个与数据视图一起滚动的部分，我不想在数据视图和它链接到的商店中添加它，因为如果点击一个项目，它会推送另一个视图，因此会导致错误试图找到一个不存在的视图。

基本上我希望容器中的所有项目都可以滚动，而不仅仅是数据视图。

这是该视图中的代码：

    config:{
    title:'Learning Journey',
    layout:'fit',

    items:[
        {
            html:'<p>This will be overlapped when the text is too long or when scrolled.</p>'
        },
        {
            xtype:'dataview',
            store:'MenuStore',
            itemTpl:'<div class="menuData {panelColour}"><h1>{panelTitle}</h1><br> {panelDesc}'
        }
    ]
}

我确信这个问题有一个简单的答案，但我无法理解它（我是 Sencha Touch 2 菜鸟）。

谢谢！

这是显示问题的图片：http://i58.tinypic.com/2v1nqk4.jpg

【问题讨论】：

标签： extjs touch dataview scrollable

【解决方案1】：

问题在于包装容器的布局。 fit 确保容器的所有项目都将填满整个容器。因此，您的 html 容器的宽度和高度分别设置为 100%。但这也适用于您的数据视图。所以这两个项目都会完全填满包装容器。

要修复它，只需将包装容器的布局设置为vbox。所以dataview会直接插入到你的html容器下。

如果您希望您的 html 容器可滚动，您必须为其添加 scrollable: true 属性。但不要忘记提供一些高度！

【讨论】：