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

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

这是我的主要视图，一个普通的旋转木马容器：

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

    config: {

        defaults: {
            styleHtmlContent : true
        },

        activeItem: 0,

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

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

});

这是我的“firstview”，它将外部面板扩展为旋转木马容器的一部分：

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

    config: {

        defaults: {
            styleHtmlContent : true
        },

        activeItem: 0,

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

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”？

嘿，在Compose小部件中，用id:'id\u Compose\u card'替换部件

用这个

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

flex:1

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

然后我还替换了属性

height: '100%',

用这个

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

flex:1

---

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

嘿，在Compose小部件中，用id替换部件：“id\U Compose\U card”

用这个

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

flex:1

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

然后我还替换了属性

height: '100%',

用这个

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

flex:1

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