Sencha touch使容器内的列表可见

Question

我有一个包含几个项目（标签，轮播，容器等）的视图-

Ext.define('MyApp.view.MyView', {
    extend:'Ext.Panel',
    alias:'widget.view',
    requires:['Ext.Panel', 'Ext.carousel.Carousel'],
    config:{
        layout:'vbox',
        cls: 'detail',
        scrollable:{
            direction:'vertical'
        }
    },

    initialize:function () {
        var type = {
            xtype: 'label',
            id:'type',
            html:'Type'
        };

        var socialButton = {
            xtype:'label',
            id:'socialButton',
            html:'<div style="position: absolute; right: 0; top: 0px; background: #efefef; border: 1px solid #e5e5e5">' +
                '<div class="x-button social-button" btnType="fb_icon" style="background: #fff url(resources/images/appimages/facebook.png) no-repeat;"></div>' +
                '<div class="x-button social-button" btnType="twitter_icon" style="background: #fff url(resources/images/appimages/twitter.png) no-repeat;"></div>' +
                '<div class="x-button social-button" btnType="google_icon" style="background: #fff url(resources/images/appimages/google.png) no-repeat;"></div>' +
                '<div class="x-button social-button" btnType="linked_icon" style="background: #fff url(resources/images/appimages/linkedin.png) no-repeat;"></div>' +
                '</div>'
        };

        if (Ext.os.is.Phone) {
            socialButton = {
                xtype:'label',
                id:'socialButton',
                html:'<div style="position: absolute; right: 0; top: 0px; background: #efefef; border: 1px solid #e5e5e5">' +
                 '<div class="x-button social-button" btnType="fb_icon" style="background: #fff url(resources/images/appimages/facebook.png) 100% 50% no-repeat;"></div>' +
                 '<div class="x-button social-button" btnType="twitter_icon" style="background: #fff url(resources/images/appimages/twitter.png) 100% 50% no-repeat;"></div>' +
                 '<div class="x-button social-button" btnType="google_icon" style="background: #fff url(resources/images/appimages/google.png) 100% 50% no-repeat;"></div>' +
                 '<div class="x-button social-button" btnType="linked_icon" style="background: #fff url(resources/images/appimages/linkedin.png) 100% 50% no-repeat;"></div>' +
                 '</div>'
           };
        }

        var titleFont = Ext.os.is.Phone ? 0.7 : 1.2;
        var title = {
            xtype:'label',
            id:'title',
            html:'title',
            style:'font-size: ' + titleFont + 'em; font-weight: bold; color: #117BBE; margin-top: 10px;'
        };

        var wFont = Ext.os.is.Phone ? 7 : 8;
        var w = {
            xtype:'label',
            margin:'0 0 0 0',
            id:'w',
            html:'wwwww',
            style:'font-size: ' + wFont + 'pt; color: #117BBE;'
        };

        var tsFont = Ext.os.is.Phone ? 'font-size: 7pt;' : '';
        var ts = {
            xtype:'label',
            id:'ts',
            html:'tststst',
            style:'font-weight: bold;' + tsFont
        };

        var carousel = {
            xtype:'slideshow',
            id:'carousel',
            cls:'carousel',
            style: 'margin-top: 10px; margin-bottom: 5px;',
            height: '300px'
        };

        var imageCaption = {
            xtype:'label',
            id:'imageCaption',
            html:'Caption of the image',
            style:'font-size: 8pt; text-align: center;'
        };

        var mainPanel = {
            xtype: 'container',
            layout: 'vbox',
            items:[
                {
                    xtype: 'label',
                    id: 'body',
                    tpl: '{body}'
                },
                {
                    xtype: 'label',
                    id: 'analysis',
                    html: 'analysis'
                },
                {
                    xtype: 'toolbar',
                    title: 'Related'
                },
                {
                    xtype: 'list',    // this list is not visible
                    id: 'related',
                    itemTpl: '{title}',
                    listeners: {
                        select: {
                            scope: this,
                            fn: this.onRelatedSelect
                        },
                        painted: function (list) {
                            //alert(list.element.dom.offsetHeight);
                        }
                    }
                }
            ]
        };

        this.add([
            type,
            socialButton,
            title,
            w,
            ts,
            carousel,
            imageCaption,
            mainPanel
        ]);
        this.element.on(
        {
            swipe:{
                scope:this,
                element:'element',
                fn:this.onSwipe
            }
        });
    },

    onSwipe:function (event) {
        this.fireEvent('Swipped', event.direction);
    },

    onRelatedSelect:function (list, record) {
        return this.fireEvent('relatedSelected', record);
    }
});

根面板包含mainPanel项，而mainPanel项又包含其他几个组件（标签和列表）。

问题出在mainPanel内部的列表。 呈现视图时，即使列表中有项目，列表中的任何项目也不可见（可能是由于其高度为零）。 在使用height config强制设置像素高度（例如200像素）之后，列表是可见的，但高度应足够动态，以便即使列表包含10个元素，所有这些元素也都可见。

我该如何解决？

编辑

这是SenchaFiddle上的演示。

Answer 1

我认为您只需要在列表中添加height: "auto"

编辑：

也将scrollable:false添加到您的列表中

演示： http : //www.senchafiddle.com/#yyCVE#GNEuj#1aEQr