1

我已经花了好几天的时间，并且严重无法理解为什么要做到这一点 - 无论如何 - 对我来说 - 它应该是默认行为。其他帖子似乎在询问如何防止我希望实现的行为，所以我一定做错了什么。

我想把这个组件：

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 的底部添加一些按钮，但现在这似乎不是特别可行。

有什么办法可以使这项工作？应该很简单吧？

4

1 回答 1

3

我找到了答案，并将其放在这里和 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

干杯!

于 2013-06-10T09:51:57.827 回答