Sencha touch Sencha Touch应用程序中未显示的卡

我正在使用Sencha Touch 1.1。以下代码构成了该视图：

truApp.views.IncidentParentView = Ext.extend(Ext.Panel, {

layout: {
    type: 'hbox',
    align: 'top'
},

initComponent: function () {

    this.sectionStore = Ext.StoreMgr.get(TrafficResponse.Stores.IncidentSections);

    this.topToolbar = new Ext.Toolbar({
        items: [
                {
                    text: 'Cancel',
                    ui: 'back',
                    handler: function() {
                        Ext.dispatch({
                            controller: truApp.controllers.incidentController,
                            action: 'cancel'
                        });
                    }
                },
                { 
                    xtype: 'spacer'
                },
                {
                    text: 'Submit',
                    ui: 'confirm',
                    handler: function() {
                        Ext.dispatch({
                            controller: truApp.controllers.incidentController,
                            action: 'submit'
                        });
                    }
                }
                ]
    });

    this.dockedItems = [ this.topToolbar ];

    this.items = [
        {
            flex: 1,
            dockedItems: [
                {
                    xtype: 'toolbar',
                    title: 'Sections',
                    ui: 'light'
                }            
            ],
            items: [
                {
                    xtype: 'list',
                    store: this.sectionStore,
                    scroll: false,
                    itemTpl: '{Description}',
                    listeners: {
                        itemTap: function(dataView, index, item, e) {
                            var record = dataView.store.getAt(index);

                            truApp.views.incidentParentView.getComponent('incidentCardPanel').setActiveItem(
                                index,
                                { type: 'slide', direction: 'left' }
                            );
                        },
                        afterrender: function(dataView) {
                            dataView.getSelectionModel().select(0, false, false);

                            truApp.views.incidentParentView.getComponent('incidentCardPanel').setActiveItem(
                                0,
                                { type: 'slide', direction: 'left' }
                            );
                        }
                    },
                    onItemDisclosure: true
                }
            ]
        },
        {
            flex: 3,
            id: 'incidentCardPanel',
            xtype: 'panel',
            layout: 'card',
            items: [
                {
                    html: 'card 1'
                },
                {
                    html: 'card 2'
                },
                {
                    html: 'card 3'
                },
                {
                    html: 'card 4'
                },
                {
                    html: 'card 5'
                },
                {
                    html: 'card 6'
                }
            ]
        }
    ];

    truApp.views.IncidentParentView.superclass.initComponent.call(this);

}

});

使用“卡片”布局时，不显示任何内容。使用“vbox”时，将显示所有6项-卡1到卡6

---

为什么使用卡片布局时不显示项目？

尝试将

全屏：true

添加到您的卡片布局设置中。没有测试，但这是我的第一个猜测，导致了卡片渲染，但因为它是嵌套的卡片布局，所以最终的布局不是我需要的。渲染问题是由于未设置卡面板的height属性造成的。您的问题是关于卡未显示的。这似乎是固定的，对吗？您期望的效果到底是什么？卡面板嵌套在hbox面板中。使卡面板全屏显示会阻止其他hbox组件显示。