Sencha触摸使容器内的列表可见-前端问题

Sencha touch make a list inside a container visible(Sencha触摸使容器内的列表可见)

本文介绍了Sencha触摸使容器内的列表可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含多个项目(标签、传送带、容器等)的视图-

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中的列表。呈现视图时，即使列表中有项，列表中也没有任何项可见(可能是因为其高度为零)。在使用height配置强制像素高度(例如，200px)之后，列表是可见的，但高度应该足够动态，以便即使列表包含10个元素，它们也全部可见。

如何修复此问题？

编辑

Here是关于SenchaFdle的演示。