代码之家 › 专栏 › 技术社区 › Ace.Yin

如何在sencha触摸转盘上添加固定按钮

carousel sencha-touch

Ace.Yin · 技术社区 · 10 年前

我正在尝试使用senchatouch(2.3)旋转木马组件作为我的应用程序的启动屏幕。

我想在旋转木马上添加2个固定按钮-就像所附的图片一样(固定意味着当用户切换旋转木马时,按钮不会随旋转木马移动)。

我尝试了许多方法,但都失败了&当用户切换转盘时,2个按钮将始终随转盘移动。

有人能告诉我怎么做吗?

==更新===

我添加了另一张图片,用于比较我通过触摸制作的旋转木马样式和我想要使用的目标样式。

==最终解决方案===

    Ext.define('MyApp.view.Startup', {
        extend: 'Ext.Container',
        xtype: 'main',
        requires: [
            'Ext.carousel.Carousel',
            'Ext.Button',
            'Ext.Container'
        ],
        config: {
            id: 'app-startup-view',
            layout: 'vbox',
            styleHtmlContent: true,
            fullscreen: true,
            style: 'background: url("/resources/images/ss2_748x1024.jpg") no-repeat center',
            items: [
                {
                    xtype: 'carousel',
                    id: 'startup-carousel',
                    height: '100%',
                    width: '100%',
                    align: 'center',
                    items: [
                        {
                            id: 'start-page-1',
                            bgimg: '/resources/images/ss2_748x1024.jpg',
                            html:'page-1'
                        },
                        {
                            id: 'start-page-2',
                            bgimg: '/resources/images/ss3_748x1024.jpg',
                            html: 'page-2'
                        },
                        {
                            id: 'start-page-3',
                            bgimg: '/resources/images/ss1_748x1024.jpg',
                            html: 'page-3'
                        }
                    ],
                    listeners: {//TODO: put this into the corresponding controller
                        activeitemchange: function (src, value, oldValue, eOpts) {
                            var view = src.up('#app-startup-view');
                            view.setStyle('background:url("' + value.bgimg + '") no-repeat center');
                        }
                    }
                },
                {
                    xtype: 'container',
                    layout: 'hbox',
                    docked: 'bottom',
                    items: [
                        {
                            xtype: 'spacer'
                        },
                        {
                            xtype: 'button',
                            id: 'login-button',
                            flex: 1,
                            text: 'Login'
                        },
                        {
                            xtype: 'button',
                            id: 'register-button',
                            flex: 1,
                            text: 'Register'
                        },
                        {
                            xtype: 'spacer'
                        }
                    ]
                }
            ]// items - solution 1
        }// config
    });

pictures for demo the differences

carousel page 1 carousel page 2 carousel page 3

1 回复 | 直到 10 年前

Martin 10 年前

正如你在图片中看到的,按钮不是旋转木马的一部分。它们在下面。所以把它们放在一个额外的容器里。

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',

    requires: [
        'Ext.Carousel',
        'Ext.Button'
    ],

    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'carousel',
                height: "80%",
                items: [
                    {
                        html: 'test1'
                    },
                    {
                        html: 'test2'
                    },
                    {
                        html: 'test3'
                    }
                ]
            },
            {
                xtpye: 'container',
                layout: 'hbox',
                items: [
                    {
                        xtype: 'spacer'
                    },
                    {
                        xtype: 'button',
                        text: 'button1'
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        xtype: 'button',
                        text: 'button2'
                    },
                    {
                        xtype: 'spacer'
                    },
                ]
            }
        ]
    }
});