Question

我在这里要做的是在旋转木马的面板中使用卡片布局。但似乎不可能创建卡片布局并且轮播实际上是卡片布局类容器之一并不常见。所以我想知道它是否可以在Sencha Touch 2中实现。

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

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

    config: {

        defaults: {
            styleHtmlContent : true
        },

        activeItem: 0,

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

这是我的'firstview'，它将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布局使您的组件填充剩余空间。

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

1 个答案: