Extjs sencha touch 2-如何将垂直滚动组件添加到水平旋转木马

我已经花了好几天的时间在这上面了，真的不明白为什么这么难做——无论如何，在我看来——这应该是默认行为。其他帖子似乎在问如何防止我希望达到的行为，所以我一定是做错了什么

我想把这个组件：

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',
    scrollable: 'true',

    config: {
        scrollable: 'true',
        layout: 'vbox',

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                docked: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'
            },

         // more items to come here
        ]
    }
});

这样，如果内容溢出当前屏幕，我可以向下滚动到底部

但是，当我将面板作为一组项目添加到旋转木马中时，旋转木马中的每个页面都是垂直锁定的。DetailPanel组件的任何溢出都是屏幕外的，完全无法访问

在过去的几天里，我尝试了所有我能想到的布局、滚动、可滚动、全屏、停靠和物品堆叠的组合，但都没有效果。最后，我想在每个DetailPanel的底部添加一些按钮，但现在似乎还不能实现

---

有什么办法可以让这一切顺利进行吗？它应该很简单，对吧？

我找到了答案，我把它放在这里和Sencha Touch论坛上

事实证明，有一个名为“scrollDock”的未记录配置选项，它使我试图做的每件事都以我想要的方式工作

以下代码现在可以正确滚动：

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',

    config: {
        layout: {
            type: 'vbox',
            align: 'start',
            pack: 'start'
        },

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                cls: 'detail-panel',
                layout: 'fit',
                scrollDock: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'

            },
            // more stuff here
        ]
    }
});

Ext.define（'proximition.view.detail.DetailPanel'{
扩展：“Ext.Panel”，
xtype:'detailpanel'，
配置：{
布局：{
键入：“vbox”，
对齐：“开始”，
包装：“开始”
},
项目：[
{
xtype:'面板'，
腰围：15，
cls:“详细信息面板”，
布局：“适合”，
scrollDock:'顶部'，
tpl:“{name}”+
'' +
“\”{description}\”'+
“{街道}，{郊区}”
},
//这里有更多的东西
]
}
});

我真的不知道为什么这不值得记录。也许Sencha的人能给我们一些启示

总之，我在这里找到了线索：

---

干杯

太棒了！非常感谢你发布这篇文章。好几天来，我一直在努力破解这个！！我欠你一品脱！

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',

    config: {
        layout: {
            type: 'vbox',
            align: 'start',
            pack: 'start'
        },

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                cls: 'detail-panel',
                layout: 'fit',
                scrollDock: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'

            },
            // more stuff here
        ]
    }
});