sencha touch 2：轮播面板之一内的卡片布局

Question

我在这里尝试做的是在轮播面板中使用卡片布局。但是创建卡片布局并不常见，而轮播实际上是类似于卡片布局的容器之一，这似乎是不可能的。所以我想知道在煎茶Touch 2中是否可以实现。

这是我的主要视图，一个普通的轮播容器：

Ext.define("myapp.view.Main", {
    extend: 'Ext.carousel.Carousel',

    config: {

        defaults: {
            styleHtmlContent : true
        },

        activeItem: 0,

        items: [
            {
                xtype: 'firstview'
            },
            {
                xtype: 'secondview'
            },
            {
                xtype: 'thirdview'
            }
        ]
    }
});

这是我的“第一视图”，它将 Ext.Panel 扩展为轮播容器的一部分：

Ext.define("myapp.view.Compose", {
    extend: 'Ext.Panel',
    xtype: 'firstview',

    requires: [
        'Ext.form.FieldSet',
        'Ext.TitleBar',
        'Ext.form.Text',
        'Ext.Button'
    ],

    config: {
        styleHtmlContent: true,
        scrollable: true,
        layout: 'vbox',

        items: [
            { // title bar
                xtype: 'titlebar',
                docked: 'top',
                title: 'a Title here'
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                layout: {
                    type: 'vbox',
                    align: 'center',
                    pack: 'center'
                },

                items: [
                    { // controll button set - to change view for composing different kinds of messages
                        xtype: 'segmentedbutton',
                        allowDepress: true,
                        allowMultiple: false,
                        items: [
                            {
                                text: 'subview-1',
                                pressed: true
                            },
                            {
                                text: 'subview-2'
                            },
                            {
                                text: 'subview-3'
                            }
                        ]
                    }
                ]
            },
        {
            xtype: 'container',
            id: 'id_compose_card',
            layout: {
                type: 'card',
                align: 'center',
                pack: 'top'
            },

            config: {
                height: '100%',
                items: [
                {
                    html: 'card 1'
                },
                {
                    html: 'card 2'
                }
            ]
            }
        }
            ]
        }

});

如您所见，此面板中有一个卡片布局。但事实上，什么都不会显示。

当然，我可以在这里找到另一种方法来实现类似的东西，但我只想知道是否无法将卡片容器嵌入到类似卡片布局的容器中，例如'tabPanel'或' sencha touch 2 中的轮播？

Answer 1

您好，在 Compose 小部件中将部分替换为 id:'id_compose_card'

有了这个

{
    xtype: 'container',
    id: 'id_compose_card',
    layout: {
        type: 'card',
        align: 'center',
        pack: 'top'
    },
    flex: 1,
    items: [
        {
            html: 'card 1'
        },
        {
            html: 'card 2'
        }
    ]
}

我只是把配置对象里面的部分拿出来放在外面。我有这种感觉，你不能将配置嵌套在另一个配置对象中以进行类定义。很多人都有问题，这似乎是问题所在。您可能想在他们的论坛上确认这一点。

那我也换了属性

height: '100%',

有了这个

flex:1

这将告诉 vbox 布局让您的组件填充剩余空间。