-1

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

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. 呈现视图时,即使列表有项目,列表的任何项目都不可见(可能是因为它的高度为零)。在使用配置强制像素高度(例如,200 像素)后,height列表是可见的,但高度应该足够动态,以便即使列表包含 10 个元素,所有元素都是可见的。

我该如何解决?

编辑

是 SenchaFiddle 的演示。

4

1 回答 1

5

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

编辑:

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

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

于 2013-01-29T09:43:27.860 回答