Sencha touch make a list inside a container visible

Question

I have a view which contains several items (labels, carousels, container etc.) -

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

The root panel contains a mainPanel item, which in turn contains several other components (labels, and a list).

The problem is with the list that is inside the mainPanel . When the view is rendered, no items of the list is visible (probably because of its height is zero) even if the list has items. After forcing a pixel height (eg, 200px) with the height config the list is visible but the height should be dynamic enough so that even if the list contains 10 elements all of them are visible.

How do I fix this?

EDIT

Here is a demo on SenchaFiddle.

Answer 1

I think you just need to add height: "auto" to your list

Edit:

Add scrollable:false to your list as well

Demo: http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr