Question

我花了好几天时间，并且严重无法理解为什么它应该如此难以做到 - 无论如何 - 对我来说应该是默认行为。其他帖子似乎在问如何防止我希望实现的行为，所以我必须做一些非常错误的事情。

我想把这个组件：

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
        ]
    }
});

进入这个轮播：

Ext.define('Proximity.view.result.ResultCarousel', {
    extend: 'Ext.Carousel',
    xtype: 'detailcarousel',

    config: {
        store: 'RemoteResultStore',
        direction: 'horizontal',
        fullscreen: true,

        defaults: {
            styleHtmlContent: true,
            scrollable: true
        }  
    }
});

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

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

在过去的几天里，我尝试了布局，滚动，可滚动，全屏，停靠和物品堆叠的各种组合，我能想到，一切都无济于事。最后，我想在每个DetailPanel的底部添加一些按钮，但现在看起来并不是特别容易实现。

有没有办法让这项工作？它应该很简单，对吧？

Answer 1

我找到了答案，并将其放在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
        ]
    }
});

我真的不确定为什么这不值得记录。也许来自Sencha的人可以启发我们吗？

无论如何，我在这里发现了我的线索：http://www.sencha.com/forum/showthread.php?250883-Container-on-top-of-a-list

干杯！

sencha touch 2 - 如何将垂直可滚动组件添加到水平轮播

1 个答案: