Sencha Touch 应用程序中未显示卡片答案

【问题标题】：Cards not displaying in Sencha Touch applicationSencha Touch 应用程序中未显示卡片
【发布时间】：2011-12-19 23:27:32
【问题描述】：

我正在使用 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。

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

【问题讨论】：

标签： sencha-touch extjs

【解决方案1】：

尝试将fullscreen: true 添加到您的卡片布局设置中。没有测试，但这是我的第一个猜测

【讨论】：

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