使用 Sencha Touch 时在 TabPanel 中使用轮播



我想问一下,在 sencha touch 中开发应用程序时,可以在 TabPanel 中添加轮播吗?我只想添加一个名为图库的选项卡,并将一些图像放在轮播中..请帮忙..

代码如下...

Ext.application({
    name: 'Employee Form',
    launch: function () {
        Ext.create('Ext.TabPanel', {
            extend: 'Ext.Carousel',
            fullscreen: true,
            defaults: {
                styleHtmlContent: true
            },
            layout: {
                animation: {
                    type: 'slide'
                }
            },
            items: [
                {
                    title: 'Home',
                    html: 'You are on the Home Screen Now' + ['<center><img width="100%" height="350px" src="http://staging.sencha.com/img/sencha.png" /></center>'].join(""),
                    items: [
                        {
                            xtype: 'toolbar',
                            html: '<center>Muhammad Burhan</center>',
                            docked: 'bottom',
                        }
                    ]
                },
                {
                    title: 'Gallery',
                    items: [
                        {
                            xtype: 'carousel',
                            direction: 'vertical',
                            items: [
                                {
                                    html: 'Welcome' + ['<center><img width="60%" height="100%" src="lib/touch/img/welcome.gif"</center>'].join(),
                                },
                                {
                                    html: 'First Picture' + ['<center><img width="100%" height="100%" src="lib/touch/img/pic.jpg" /></center>'].join(""),
                                }
                            ]
                        }
                    ]
                },

为什么不从选项卡面板单独创建带有图像的轮播,而只是将轮播作为标题为"图库"的项目?

这里有一个例子 http://www.senchafiddle.com/#DQ0wD:

实际上需要将第二个标签栏项设置为轮播,而不是像您尝试的那样将轮播项添加到标签栏项。

希望这有帮助

最新更新