sencha touch 2:旋转木马的一个面板内的卡片布局

Question

我在这里尝试做的是在旋转木马的面板中使用卡片布局。但似乎不可能创建一个不常见的卡片布局，而carousel实际上是一个类似于卡片布局的容器。所以我想知道这是否可以在Sencha Touch 2中实现。

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

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

    config: {

        defaults: {
            styleHtmlContent : true
        },

        activeItem: 0,

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

下面是我的“第一个视图”，它将Ext.Panel扩展为carousel容器的一部分：

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'
                }
            ]
            }
        }
            ]
        }

});

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

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

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'
        }
    ]
}

我只是取出了config对象内部的部分，并将它们放到了外部。我有一种感觉，你不能将一个配置嵌套在另一个类定义的配置对象中。很多人都有问题，这似乎就是问题所在。你可能想要在他们的论坛上确认这一点。

然后我还替换了属性

height: '100%',

有了这个

flex:1

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